Highcharts滚动条异常：数据更新后无法正确设置轴极值求助

我用Highcharts渲染柱状图，因数据量较大采用Highcharts Stock的滚动条功能。通过以下代码设置轴极值：

chart.xAxis[0].update(
    {
      min: 0,
      max: 9 
    }
)

调用redraw()后，初始15条数据仅显示前10条，符合预期，但出现以下异常：

• 滚动至最后一条数据后，更新为5条数据，图表仍停留在原滚动位置，设置极值也无法正确显示全部5条数据；
• 再更新为13条数据时，图表仍保留之前的极值设置，仅显示5条数据，更新参数无效。

Highcharts Stock的navigator组件会自动缓存之前的轴范围状态，更新数据后直接调用xAxis.update()设置极值时，新的配置会被navigator的缓存状态覆盖，导致极值设置不生效。同时数据长度变化后，navigator未同步调整范围，进而引发显示异常。

更新数据后改用xAxis.setExtremes()方法设置轴范围，该方法会自动同步navigator状态；同时可根据新数据长度动态计算显示范围，避免超出数据边界。

具体代码示例 #

// 假设newData为更新后的数据集
chart.series[0].setData(newData);
// 动态计算max值，确保不超过数据索引上限
const maxVal = Math.min(newData.length - 1, 9);
// 设置轴极值，最后两个参数分别为是否触发事件、是否立即重绘
chart.xAxis[0].setExtremes(0, maxVal, true, false);
chart.redraw();

额外优化 #

初始化图表时可配置navigator.xAxis.adaptToUpdatedData = true，让navigator自动适配更新后的数据范围：

navigator: {
  xAxis: {
    adaptToUpdatedData: true
  }
}

内容的提问来源于stack exchange，提问作者lancelotvr