HighCharts定时刷新图表

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

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

 

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

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

 

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);

 

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);

 

刷新X轴数据采用setCategories方法，如：$('#chart').highcharts().xAxis[0].setCategories(date);

 

3. 更多参考内容

HighCharts#Series.setData