图表未根据其容器 Highcharts reactjs 调整大小答案

【问题标题】：Chart not resizing according to it's container Highcharts reactjs图表未根据其容器 Highcharts reactjs 调整大小
【发布时间】：2020-10-24 13:33:34
【问题描述】：

这是实时示例 URL： https://react-bjtmoe.stackblitz.io/

我正在使用highcharts-react-official npm 包来创建图表。当点击蓝线时，容器大小会增加，但里面的图表并没有根据容器增加它的大小。这里是：https://stackblitz.com/edit/react-bjtmoe

代码说明：

代码本身很容易理解，因为我是从头开始编写的，以便于理解问题所在。我创建了两个组件，chart.js 和 chart_container.js。 chart_container.js 文件基本上是图表的包装。我在此文件中有数据逻辑，处理后，我将数据和 DOM 元素传递给我的 chart.js 文件，该文件会将实际图表呈现给 DOM。

我在 chart.js 文件中创建了 ref 并将其传递给 HighchartsReact 组件，在将 Highcharts 渲染到 DOM 之后，我将 ref 返回到图表容器并在那里调用 reflow() 方法。 reflow 方法可用，但我不明白为什么它不根据容器大小增加或减少其大小。

谢谢。

【问题讨论】：

标签： reactjs highcharts

【解决方案1】：

您需要在onclick事件函数回调结束时调用reflow方法：

  elm.onclick = function() {
    elm.style.height = "400px";
    elm.style.width = "600px";

    chart.reflow();
  };

现场演示： https://stackblitz.com/edit/react-pcfzsu?file=src%2Fchart_container.js

API 参考： https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

【讨论】：

我在循环内渲染图表。因此，我通过为每个图表组件分配不同的 ref 并从该 ref 调用 reflow 方法来解决了这个问题。