Highcharts已渲染后调用setOptions修改配置如何触发全部图表同步重绘？

修改完全局配置后，遍历Highcharts全局挂载的已渲染图表实例，强制y轴应用新配置后触发重绘即可，具体实现代码如下：

// 第一步：更新全局y轴配置
HighCharts.setOptions({
  yAxis: {
    labels: {
      formatter: function () {
        return `${currency} ${formatCostNumberStr(this.value)}`;
      }
    }
  }
});

// 第二步：批量重绘所有图表
Highcharts.charts.forEach(chart => {
  // 跳过已销毁的无效图表实例，避免报错
  if (!chart) return;
  // 单y轴场景直接更新第一个y轴，多y轴场景可遍历chart.yAxis数组逐一更新
  chart.yAxis[0].update({}, false);
  // 触发重绘，传false关闭动画提升切换流畅度
  chart.redraw(false);
});

注意事项 #

• 如果你的图表存在多y轴配置，需要把chart.yAxis[0].update({}, false)替换为遍历chart.yAxis的逻辑，对每个轴都调用一次update
• update方法第二个参数设为false是为了避免单次更新就触发重绘，统一在所有配置更新完成后调用redraw，减少不必要的渲染开销
• 你也可以根据业务需求调整redraw的参数，传true会启用默认的重绘动画

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