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