Highcharts Navigator动态缩放：如何实现拖动手柄时实时触发缩放

可以实现，仅需调整初始化配置即可开启该效果，无需额外开发自定义逻辑。

核心配置说明 #

Highcharts 针对导航器交互原生提供了liveRedraw配置项，默认值为false，即仅在松开手柄后触发重绘缩放，将其设置为true即可实现拖动过程中实时更新图表。

配置示例 #

Highcharts.stockChart('yourChartContainer', {
  // 你的其他图表配置，如序列、坐标轴、tooltip等
  navigator: {
    liveRedraw: true, // 开启导航器拖动实时重绘
    // 其他navigator配置
  },
  // 若你同时使用了范围选择器的拖拽选框，也可同步开启对应配置
  rangeSelector: {
    liveRedraw: true
  }
});

性能提示 #

如果你的图表单序列数据量超过1万条，开启实时重绘可能在低性能设备上出现拖拽卡顿，可搭配开启dataGrouping数据分组配置优化渲染效率。

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