Highcharts 回流未更新 Highcharts 容器宽度答案

【问题标题】：Highcharts reflow is not updating Highcharts container widthHighcharts 回流未更新 Highcharts 容器宽度
【发布时间】：2021-06-13 02:13:09
【问题描述】：

所以，如您所见，我正在尝试重排 Highcharts 以根据其父容器保持正确的宽度，为此我正在监听侧边栏状态并在状态更改时调用重排.

useEffect(() => {
   Highcharts.charts[0].reflow();
}, [collapseSideBar]);

这是我的 Highcharts 组件：

<div className="text-black-50 col-span-2 row-span-2 bg-white rounded-lg shadow-xl h-100 w-100">
    <HighchartsReact highcharts={Highcharts} options={a11Options} />
</div>

【问题讨论】：

标签： javascript reactjs highcharts

【解决方案1】：

您可以尝试在侧边栏动画结束后推迟回流方法的执行。或者，如果更方便，请尝试按如下方式设置超时：

useEffect(() => {
   setTimeout(function() {
      Highcharts.charts[0].reflow();
   }, 300);
}, [collapseSideBar]);

记得将 300 值更改为动画时间增量。

由于性能原因，动画运行后 DOM 中元素的宽度会更新，因此会发生这种情况。在动画期间，可能正在制作一些变换 CSS 规则。

【讨论】：