Highstock图表在侧边栏展开时无法自适应调整尺寸的问题排查

场景说明 #

在带可切换侧边栏的仪表盘布局中展示Highstock图表，默认侧边栏处于展开状态。切换侧边栏时，触发window.resize事件并调用图表的reflow方法：

• 关闭侧边栏时，图表自适应正常
• 再次展开侧边栏时，chartWidth会大于containerWidth，出现适配问题

已通过MUI Box组件验证：容器尺寸在侧边栏切换时能正常调整，仅图表存在异常。

当前实现代码 #

侧边栏切换的onClick事件逻辑：

onClick={() =>
  {
    toggleIsOpened(!isOpened);
    var isResized = window.dispatchEvent(new Event('resize'));
    console.log("isResized:",isResized);
    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }
  }
}

曾尝试手动设置图表尺寸，未解决问题：

Highcharts.charts[i].setSize(
  Highcharts.charts[i].containerWidth,
  false
);

临时方案（不希望使用） #

通过延迟50ms触发resize事件可临时修复，但依赖人工延迟不够可靠：

setTimeout(
  ()=>{window.dispatchEvent(new Event('resize'));},
   50
);

求无需人工延迟的解决方案。

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