reactjs - react-highcharts 如何调用回流？

Question

我使用 kirjs/react-highcharts用于 react 的插件，但我不知道如何获取 Highchart 组件以便调用 reflow，例如:$('#container1').highcharts().reflow()

从文档中可以看出:

For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().

但我没有看到任何 reflow() 方法。

有什么想法吗？

编辑

它位于 ReactHighcharts.Highcharts.charts 下，所以我可以调用

ReactHighcharts.Highcharts.charts[0].reflow()

但是它有所有 highchart 实例的列表所以我不知道我的索引是什么

Answer 1

我正在使用 highcharts-react-official 和 highcharts。它们可通过 npm 获得.虽然我用的是不同的包，但是工作原理应该是一样的。

react-highchart中reflow()函数的使用方式也是Highcharts.charts[i].reflow()。我为演示准备了 2 个代码沙箱。第一个代码沙箱显示了每个图表的重排方式，第二个代码沙箱显示了特定图表的重排方式。

第一个代码沙箱链接是here .

1. App.js 上有一个按钮可以隐藏和显示 Highcharts div。
2. 子组件是 React.memo(用于性能优化)，因此隐藏的 Highcharts 在可见后不会自动调整大小。
3. 让每个图表窗口根据窗口大小调整大小。以下代码放在 App.js 中。它查找所有现有图表并重新排列它们:

    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }

第二个代码沙箱链接是here .

1. 与第一个代码沙箱几乎相同，但是有一个引用每个图表的ref数组。
2. 需要重新流动的图表在其图表选项中放置一个 id。
3. 迭代每个图表并获取具有该 ID 的图表的索引，例如本例为“secondChart”。

    for (var i = 0; i < chartRef.current.length; i++) {
      if (
        chartRef.current[i].chart.userOptions.id !== undefined &&
        chartRef.current[i].chart.userOptions.id === "secondChart"
      )
        Highcharts.charts[chartRef.current[i].chart.index].reflow();
    }

1. 重排该图表。