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

一、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"}>

 

数据报表 查看报表数据

 

   

        
        
        
        
        
      选择时间
     

<{if $start_date == ''}>开始时间<{else}><{$start_date}><{/if}>-<{if $start_date== ''}>结束时间<{else}><{$end_date}><{/if}>
       

今日|昨日|近7日|近30日 |
         
            12月
            11月
            10月
            9月
            8月
            7月
            6月
            5月
            4月
            3月
            2月
            1月
         
          | 全部
         

自定
           
            到
           
         

          日期不能为空

     

     
   

    
    
 

 

<{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;            
    }