Highcharts动态曲线图图表实现

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <script type="text/javascript" src="../js/exporting.js"></script>
    <script type="text/javascript">
      $(function () {
          $(document).ready(function () {
              Highcharts.setOptions({
                  global: {
                      useUTC: false
                  }
              });

              $('#container').highcharts({
                  chart: {
                      type: 'spline',
                      animation: Highcharts.svg, // don't animate in old IE
                      marginRight: 10,
                      events: {
                        //load:function(){} 表示图表加载完成后执行的函数
                          load: function () {

                              // set up the updating of the chart each second
                              var series = this.series[0];
                              //setInterval(function(){} , 1000) 表示每1000毫秒执行一次function
                              setInterval(function () {
                                  var x = (new Date()).getTime(), // current time
                                      y = Math.random()*100;
                                  /*
                                  series.addPoint([x,y] , bolean , boolean) 表示在数据组中添加一个数据点，
                                  第一个boolean参数表示是否添加点后redraw图表 默然true 如果设置flalse 需要调用chart.redraw()来更新图表，当一次添加多个数据点时建议false
                                  第二个boolean参数表示添加点后是否将图表左移，即去除最开始的点 默然false
                                  */
                                  series.addPoint([x, y], true, true);
                              }, 1000);
                          }
                      }
                  },
                  title: {
                      text: '动态随机数据 '
                  },
                  xAxis: {
                      type: 'datetime',//设定x轴为时间
                      tickPixelInterval: 150//设定x轴刻度间距px
                  },
                  yAxis: {
                      title: {
                          text: 'Value'
                      },

                  },
                  tooltip: {//鼠标移到数据点时出现的TIP
                      formatter: function () {
                          return '<b>' + this.series.name + '</b><br/>' +
                              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                              Highcharts.numberFormat(this.y, 2);//this 表示Point 详见API
                      }
                  },
                  legend: {
                      enabled: true//设置logo不显示
                  },
                  exporting: {
                      enabled: true//设置可导出图表
                  },
                  series: [{
                      name: 'Random data',
                      //type:'column',这里也可以定义一个type，并且会覆盖{chart:{type:'spline'}}中的定义的type
                      //( function(){} )() 这种表示调用这个匿名function 下面的data: 匿名函数返回数组
                      data: (function () {
                          // generate an array of random data
                          var data = [],
                              time = (new Date()).getTime(),
                              i;
                          //此处i定义为负，为后面的data.push()做准备
                          for (i = -19; i <= 0; i += 1) {
                              data.push({
                                //x表示横坐标，为时间转化的毫秒数
                                  x: time + i * 1000,
                                  y: Math.random()
                              });
                          }
                          return data;
                      }())
                  }]
              });
          });
      });

    </script>
</head>
<body>
    <div id="container" style="min-800px;height:400px;"></div>
</body>
</html>
总结：
在chart:{events:{load:function(){}}}中定义一个匿名的函数，它将在图表加载后开始执行，可在匿名的函数中设置setInternal(function(){},timeSpan)，每间隔一段timpSpan的时间执行一个取新数据的函数，通过this.series[0]取到series对象，并利用series.addPoint([],boolean,boolean)加到图表中。