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