反应-高级图表如何调用再流？

Question

我使用kirjs/react高图表插件来响应，但我不知道如何获得High图表组件，以便调用reflow：$('#container1').highcharts().reflow()

从文档中，its告诉我们：

要从高海图库访问方法和属性，可以使用ReactHighcharts.Highcharts。例如，高级图表选项可以通过ReactHighcharts.Highcharts.getOptions()获得。

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

有什么想法吗？

编辑

它位于ReactHighcharts.Highcharts.charts下面，所以我可以打电话给

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

但是它有所有高图表实例的列表，所以我不知道什么是我的索引。

Answer 1

我正在使用高级图表-反应-官方和高级图表。它们可以通过npm获得。虽然我使用的是不同的软件包，但工作原理应该是相同的。

reflow()函数在react中的使用方法还包括Highcharts.chartsi.reflow()。我已经为演示准备了两个代码沙箱。第一个代码沙箱显示每个图表的重新流动的方式，第二个代码沙箱显示一个特定图表的重新流动的方式。

第一个代码沙箱链接是这里。

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

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

第二个代码沙箱链接是这里。

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. 再来一遍图表。

Answer 2

可以在选项中使用事件load设置刷新。

解决办法:您必须使用reflow()设置setTimeout()，这将触发调整大小。时间设置为0以避免延迟。

溶液

const options = {
    chart: {
      type: 'column',
      style: {},
      events: {
        load() {
          setTimeout(this.reflow.bind(this), 0);
        },
      },
    },
    title: 'Column Chart',
  }

使用

<HighchartsReact highcharts={Highcharts} options={options} />