Reactjs 图表未根据它调整大小'；s容器Highcharts JS

以下是实时示例URL：

我正在使用

highcharts-react-official

npm包创建图表。单击蓝线时，容器大小将增加，但其中的图表不会根据容器大小增加其大小。这是：

代码说明：

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

我在

chart.js

文件中创建了ref，并将其传递给HighchartsReact组件，在Highcharts呈现到DOM之后，我将ref返回到图表容器，并在那里调用

reflow（）

方法。回流焊方法是可用的，但我不明白为什么它不增加或减少其大小根据容器大小

---

谢谢。

您需要在

onclick

事件函数回调结束时调用

reflow

方法：

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

    chart.reflow();
  };

---

现场演示：

---

API参考：

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