一、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" οnsubmit="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);" οnclick="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" οnclick="searchTimeFlag(0);" style="margin-left:0px">今日</a>|<a href="javascript:void(0)" id="aid2" οnclick="searchTimeFlag(1);">昨日</a>|<a href="javascript:void(0)" id="aid3" class="on_choose" οnclick="searchTimeFlag(7);">近7日</a>|<a href="javascript:void(0)" id="aid4" οnclick="searchTimeFlag(30);">近30日</a> |
          <select id="selectMonth" class="span1" οnchange="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" οnclick="searchTimeFlag(99);">全部</a> </span>
          <p>自定
            <input type="text" id="startTime" name="startTime" class="Wdate"  οnclick="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" οnclick="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" οnclick="closeWin();"><img src="static/img/no.jpg"></a><a href="javascript:void(0);" οnclick="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>
<!-- Additional files for the Highslide popup effect -->
<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;            
    }