highcharts项目笔记-通过Ajax json数据绘制图表

来源：互联网发布：ubuntu 用户组权限编辑：程序博客网时间：2024/05/22 13:07

一、highcharts点击事件获取点击点的值

chart = new Highcharts.Chart({   plotOptions: {       series: {           cursor: 'pointer',           events: {               click: function(e) {                   alert(e.point.category);               }           }       }   },

从代码中可以看出e.point就是点击事件所获得的点击点的对象。category是对应的x轴的值，也可以获得y轴对应的值等。

当然，如果需要更复杂的操作，可以参考API的复杂功能：http://www.highcharts.com/demo/line-ajax

二、默认只加载一条曲线

在一个图像中有多条曲线，但是默认想只显示第一条曲线，则需要做如下设置即可：

    chart: {
                renderTo: 'plans',
                type: 'line',
                events: {
                    load: function (event) {
                        for (var i = this.series.length - 1; i > 0; i--) {
                            this.series[i].hide();        //设置只显示第一条线，其他都不显示
                        }
                    }
                }
            }

三、去掉highcharts网站url

采用highcharts绘图，右下角默认会有一个其网站url存在，这会影响美观，只需做如下设置即可去掉：

    credits: {
                enabled: false     //去掉highcharts网站url
            }

四、动态增加曲线数量

如需在显示曲线后动态增加显示曲线条数，只需如下操作即可：

    var chart = new Highcharts.Chart(options);
    chart.addSeries({
                name: '合计',
                data: [61, 63, 65, 67, 69, 71, 73, 70, 67, 64, 61, 57]
            });
    或

    chart.addSeries({ name: 'DataURL serie', dataURL: 'serie3.txt' });

五、动态删除曲线

    chart.series[0].remove();

六、动态改变曲线数据

参考：http://jsfiddle.net/jlbriggs/XQu8E/11/

模板代码
<{include file="pageheader.tpl"}>
<div class="wrap">
<div class="title" id='aa'><strong class="l">数据报表</strong> <span class="relative r"> <a class="buttons4" href="?c=ptd&a=daily1133i&line=&r=<{$rand}>"><font>查看报表数据</font></a></span> </div>
<div class="oper">
    <form method="GET" action="" name="sear" class="form-inline" onsubmit="dovalidate();">
       <input type="hidden" name="c" value="ptd" />
       <input type="hidden" name="a" value="daily1133i" />
       <input type="hidden" name="line" value="1" />
       <input type="hidden" name="timestart" id="timestart" value="" />
       <input type="hidden" name="timeend" id="timeend" value="" />
      <label for="">选择时间</label>
      <div class="relative"> <a class="time" href="javascript:void(0);" onclick="timet('time','timecolse');closeWin();"><span><font id="start" name="start"><{if $start_date == ''}>开始时间<{else}><{$start_date}><{/if}></font><font id="middle">-</font><font id="end" name="end"><{if $start_date== ''}>结束时间<{else}><{$end_date}><{/if}></font></span></a>
        <div class="timetxt" id="time"> <span> <a href="javascript:void(0)" id="aid1" onclick="searchTimeFlag(0);" style="margin-left:0px">今日</a>|<a href="javascript:void(0)" id="aid2" onclick="searchTimeFlag(1);">昨日</a>|<a href="javascript:void(0)" id="aid3" class="on_choose" onclick="searchTimeFlag(7);">近7日</a>|<a href="javascript:void(0)" id="aid4" onclick="searchTimeFlag(30);">近30日</a> |
          <select id="selectMonth" class="span1" onchange="selectMonthf();">
            <option value="2012-12" id="2012-12">12月</option>
            <option value="2012-11" id="2012-11">11月</option>
            <option value="2012-10" id="2012-10">10月</option>
            <option value="2012-9" id="2012-9">9月</option>
            <option value="2012-8" id="2012-8">8月</option>
            <option value="2012-7" id="2012-7">7月</option>
            <option value="2012-6" id="2012-6">6月</option>
            <option value="2012-5" id="2012-5">5月</option>
            <option value="2012-4" id="2012-4">4月</option>
            <option value="2012-3" id="2012-3">3月</option>
            <option value="2012-2" id="2012-2">2月</option>
            <option value="2012-1" id="2012-1">1月</option>
          </select>
          | <a href="javascript:void(0)" id="aid5" onclick="searchTimeFlag(99);">全部</a> </span>
          <p>自定
            <input type="text" id="startTime" name="startTime" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-M-dd',minDate:'2011-12-25',maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})">
            到
            <input type="text" id="endTime" name="endTime" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-M-dd',minDate:'#F{$dp.$D(\'startTime\')||\'2011-12-25\'}',maxDate:'%y-%M-%d'})">
          </p>
          <span style="display:block"><small id="datamessage" class="l">日期不能为空</small><a href="#" class="timecolse r" onclick="closeWin();"><img src="static/img/no.jpg"></a><a href="javascript:void(0);" onclick="searchTimeFlag(6);" id="aidyes" class="r"><img src="static/img/yes.jpg"></a> </span> </div>
      </div>
      <input type="submit" value="查询" class="btn" />
    </form>

   <script>
   function dovalidate(){
       document.getElementById("timestart").value=document.getElementById("start").innerHTML;
       document.getElementById("timeend").setAttribute('value',document.getElementById("end").innerHTML);
   }
   </script>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
   $(function () {
        // define the options
        var options = {

            chart: {
               renderTo: 'container',
               type: 'line',
               events: {
                   load: function (event) {
                       for (var i = this.series.length - 1 - 1; i > 0; i--) {
                           this.series[i].hide();        //设置只显示第一条线，其他都不显示
                       }
                   }
               }

            },

            title: {
                text: '飞流游戏中心iOS日报表——数据走势图',
               margin: 15
            },

            subtitle: {
                text: ''
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }],

            legend: {
           /*
                align: 'left',
                verticalAlign: 'top',
                y: 320,
                floating: true,
                borderWidth: 0
               */
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 70,
                borderWidth: 0,
               itemMarginTop: 5,
               itemMarginBottom: 5
            },

            tooltip: {
                shared: true,
                crosshairs: true,
               style: {
               }
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%Y, %b %e, %Y', this.x) +':<br/> '+
                                        this.y +' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },
           credits: {
                enabled: false     //去掉highcharts网站url
            },
            series: [{
                name: '新增用户数',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: '注册/绑定用户数'
            }, {
                name: '联网用户数'
            }, {
                name: '联网次数'
            }, {
                name: '联网老用户数'
            }, {
                name: '老用户联网次数'
            }, {
                name: '下载次数'
            }, {
                name: '下载人数'
            }, {
                name: '宏观留存率(%)'
            }]
        };

        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        // This data is obtained by exporting a GA custom report to TSV.
       //GA = Google analytics 是谷歌公司的一款免费企业级分析软件，任何人都可以免费注册使用。软件的特点是电子商务功能。GA自定义报告
        // http://api.jquery.com/jQuery.get/
       var datestart = document.getElementById("start").innerHTML;
       var dateend = document.getElementById("end").innerHTML;
        jQuery.get('http://pmtest.feiliu.com/?c=ptd&a=chart_ajax_1133i', {timestart:datestart,timeend:dateend}, function(data, state, xhr) {
            var records = [],
                date,
                // set up the data series
                newUsers = [],
                regUsers = [],
               connUsers = [],
               connTimes = [],
               connUsersOld = [],
               connTimesOld = [],
               dlTimes = [],
               dlUsers = [],
               livePercentage = [];
            // inconsistency
            if (typeof data !== 'string') {
                data = xhr.responseText;
            }

            // split the data return into lines and parse them
           data = eval('(' + data + ')');
           //alert(data);
            jQuery.each(data, function(i, record) {
                // all data records start with a double quote
               date = record.thedate;
               //alert(date);
               newUsers.push([
                   date,
                   parseInt(record.new_user, 10)
               ]);
               regUsers.push([
                   date,
                   parseInt(record.reg_user)
               ]);
               connUsers.push([
                   date,
                   parseInt(record.conn_user)
               ]);
               connTimes.push([
                   date,
                   parseInt(record.conn_time)
               ]);
               connUsersOld.push([
                   date,
                   parseInt(record.conn_user_old)
               ]);
               connTimesOld.push([
                   date,
                   parseInt(record.conn_times_old)
               ]);
               dlTimes.push([
                   date,
                   parseInt(record.dl_time)
               ]);
               dlUsers.push([
                   date,
                   parseInt(record.dl_user)
               ]);
               livePercentage.push([
                   date,
                   parseInt(record.percentage)
               ]);
            });
            options.series[0].data = newUsers;
            options.series[1].data = regUsers;
           options.series[2].data = connUsers;
           options.series[3].data = connTimes;
           options.series[4].data = connUsersOld;
           options.series[5].data = connTimesOld;
           options.series[6].data = dlTimes;
           options.series[7].data = dlUsers;
           options.series[8].data = livePercentage;
            $('#container').highcharts(options);
        });
    });
</script>

<script src="./static/highcharts/js/highcharts.js"></script>
<script src="./static/highcharts/js/modules/exporting.js"></script>

<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<{include file="pagefooter.tpl"}>

控制器文件中类pmc_ptd之函数定义：
   public function chart_ajax_1133i(){
           $datefrom = empty($_GET['timestart']) || ($_GET['timestart'] == '开始时间') ? date('Y-m-d',strtotime('-20 days')) : date('Y-m-d',strtotime($_GET['timestart']));
           $dateto = empty($_GET['timeend']) || ($_GET['timeend'] == '结束时间') ? date('Y-m-d',strtotime(' ')) : date('Y-m-d',strtotime($_GET['timeend']));
           $coopid = $_GET['coopid'] ? $_GET['coopid'] : '';
           $edition = empty($_GET['version']) ? '' : $_GET['version'];

           $data = mod_ptd::get_ptd_jsondata($datefrom, $dateto, $edition, $productid = 1133, $plat = 'i', $coopid);
           $jsonencode = json_encode($data);
           echo $jsonencode;
   }