仅在 Highchart 上显示最后的 x 个点

Question

我有一个这样的动态数据系列

[1,0],[2,0],[3,0],[4,0],[5,0],[6,2],[7,5],[8,6],[9,6],[10,6],[11,7],[12,8],[13,8],[14,9]

数据会自动增长，所以稍后会添加一个额外的数据点，例如[15,13]

我有一个输入字段，用户可以在其中 select 从他想显示的末尾算起多少点。例如，如果他输入 5，则只有 [10,6],[11,7],[12,8],[13,8],[14,9] 应该可见。但是当添加额外的点时，这应该会自动变成[11,7],[12,8],[13,8],[14,9],[15,13]。

我想我必须使用 chart.xAxis[0].setExtremes() 但我不知道输入什么作为参数...?

Answer 1

添加点时您必须"reapply" setExtremes。 setExtremes 函数接受这些参数 (API)：

setExtremes (Number min, Number max, [Boolean redraw], [Mixed animation])

您必须使用 min 和 max 来显示所需的点数，并包括最后一个点。例如，您可以这样做：

var chart = $('#container').highcharts();
var numberOfPointsToShow = 5;

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

// Get index of last point
var lastPoint = chart.series[0].data.length - 1;

// Set extremes to go from "min" (based on last point) to last point
chart.xAxis[0].setExtremes(
        lastPoint - (numberOfPointsToShow - 1), // min
        lastPoint); // max

参见 this JSFiddle example 动态添加点。

仅在 Highchart 上显示最后的 x 个点

show only last x points on Highchart

highcharts