在Highcharts中設置動態x軸范圍

Question

以下設置將Highcharts的x軸范圍設置為過去一小時：

xAxis: {
    min: new Date().setHours(new Date().getHours() - 1), // last hour
    max: new Date().getTime()),                          // now
},

然而，每隔幾秒就會添加更多數據點。 如何使x軸動態，使得刻度隨新數據點更新，僅顯示過去一小時？

Answer 1

動態添加點時，可以使用Axis.setExtremes （ API ）同時更新x軸。 例如這樣：

// Add new (random) point
chart.series[0].addPoint(Math.floor(Math.random() * 100));

// Update x-axis range
chart.xAxis[0].setExtremes(new Date().getTime(), new Date().setHours(new Date().getHours()+1));

請參閱此JSFiddle以獲得類似的演示。

Answer 2

你看過Highstock嗎？ http://www.highcharts.com/stock/demo 。 也許它更適合您的工作

但是在Highchart上，您可以像這樣更新min max：

chart.xAxis[0].update({
    min: new Date().getTime(),
    max: new Date().setHours(new Date().getHours()-1),
});

Answer 3

1）它看起來你倒退了（最大應該是'現在'，最小應該是-1小時）

2）實際問題是什么？ 什么不起作用？

如果適當設置最小值/最大值，則僅顯示最小值和最大值內的數據。

您還應該只將數據發送到要顯示的時間范圍內的圖表。 否則你最終會發送大量不需要的數據。

查看addPoint（）方法的'shift'屬性：

• http://api.highcharts.com/highcharts#Series.addPoint

另請參閱setData（）方法：

• http://api.highcharts.com/highcharts#Series.setData