HighCharts定时刷新图表

                       

假设图表容器的id为exChart，如下：

<div style="height:450px;" id="exChart">
   
   

    
    
1
   
   

1. 首先在series中声明id，如下：

 series: [{        id   : 'exSeries', // id声明为exSeries         name : '测试数据',        data : []          //  填充需要的数据  }]
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
   
   

2. 创建定时器刷新数据

    // 首先获取serie    var exSeries =  $('#chart').highcharts().get('exSeries');    // 设置定时器, 5秒刷新一次    setInterval(function() {        // 设置需要显示的数据        var data = [1, 3, 5, 3, 1];        // 第2个参数表示是否重绘，第3个参数表示是否启用动画，第4个参数表示是否更新数据点[数组长度一样时建议false]        exSeries.setData(data, true, false, false);    }, 5000);
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
   
   

3. 数据更新建议

      如果要实现实时数据的增量效果，即数据总是从右向左推进，可考虑将data设置为变量，然后在数据的头部弹出一个数字，在数据的尾部压入一个数字，如下：

    // 加入当前数组有5个元素    var data = [1, 3, 5, 3, 1];    // 随机创建一个数字，或从服务器获取一个数字    var now = Math.random() * 10;    // 从头部弹出一个数字    data.shift();    // 把获取到的数据压入尾部    data.push(now);    // 最后设置数据，即可实现曲线、趋势线从右向左的动态效果    exSeries.setData(data, true, false, false);
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
   
   

3. 更多参考内容

HighCharts#Series.setData