Highcharts實時多系列

我無法獲得實時圖表工作。數據將實時到達，沒有歷史數據開始。我希望能夠在圖表窗口中顯示最後10分鐘，因爲隨着數據進入，時間會沿着圖表進行記錄。每個系列的數據將隨機到達。我已經完成了這個jsFiddle。Highcharts實時多系列

我怎樣才能顯示最後10分鐘，沿蜱（目前只顯示最後一個點/單數據？

$(document).ready(function() { 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false 
    } 
    }); 

    Highcharts.chart('container', { 
    chart: { 
     type: 'spline', 
     animation: Highcharts.svg, // don't animate in old IE 
     marginRight: 10, 
     events: { 
     load: function() { 
      var series1 = this.addSeries({ 
      name: "Random 1", 
      data: [[(new Date()).getTime(), 5000]] 
      }); 
      var series2 = this.addSeries({ 
      name: "Random 2", 
      data: [[(new Date()).getTime(), 5000]] 
      }); 
      (function loop() { 
      var rand = Math.round(Math.random() * 100) + 500; 
      setTimeout(function() { 
       var x = (new Date()).getTime(); 
       var y1 = 5000 + Math.round(Math.random() * 100); 
       var y2 = 5000 + Math.round(Math.random() * 100); 
       //console.log(x + ', ' + y); 
       series1.addPoint([x, y1], true, true); 
       series2.addPoint([x, y2], true, true); 
       loop(); 
      }, rand); 
      }()); 
     } 
     } 
    }, 
    title: { 
     text: 'Live random data' 
    }, 
    xAxis: { 
     type: 'datetime', 
     tickPixelInterval: 150 
    }, 
    yAxis: { 
     title: { 
     text: 'Value' 
     }, 
     plotLines: [{ 
     value: 0, 
     width: 1, 
     color: '#808080' 
     }] 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    legend: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    } 
    }); 
});

來源

2017-10-16 John

對於每一個負載，要添加新的系列。您不會爲現有系列添加分數。根據我的理解，這將取代以前的系列，因此將不會有歷史性的一點顯示，只有當前的觀點。如果您爲系列添加點，您可以使用'tickPlacement'，'tickInterval'，'tickAmount'或'xAxis'上的其他參數之一來顯示或隱藏其中的一部分。 – ewolden

您可以addPoint使用，而不是shift選項setExtremes功能。這代碼行：

xAxis.setExtremes(Math.max(series1.points[0].x, x - 10 * 1000 /*10s*/));

將導致的以下行爲如果第一個系列的第一個點在最後10秒鐘內有x值（我用秒而不是分鐘來更快地看到效果），那麼它就變成了極端的極端。否則它將最新點的x值減少10秒作爲低極值。

現場工作示例：http://jsfiddle.net/kkulig/66kyh13k/

請注意，在這兩個addPoint電話，我禁用重畫。重繪發生在setExtremes，並且沒有必要執行它之前。

API參考：

來源

2017-10-17 11:26:55

Highcharts實時多系列

回答

相關問題