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

请参阅this JSFiddle进行类似的演示。

Answer 2

你看过Highstock吗？ http://www.highcharts.com/stock/demo。也许它更适合你正在做的事情

但在Highchart上你可以像这样更新最大值：

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