Question

我使用kirjs/react-highcharts插件进行反应，但我不知道如何获取Highchart组件以便像reflow那样调用$('#container1').highcharts().reflow()

从文档中可以看出：

访问方法＆amp;来自Highcharts库的属性可以使用ReactHighcharts.Highcharts。例如，Highcharts选项可通过ReactHighcharts.Highcharts.getOptions（）获得。

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

有什么想法吗？

修改

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

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

但它有所有高级图实例的列表，所以我没有任何信息是我的索引

Answer 1

我正在使用highcharts-react-official和highcharts。可通过npm 使用它们。尽管我使用的是不同的软件包，但工作原理应该相同。

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

第一个代码沙箱链接为here。

App.js上有一个按钮可以隐藏和显示highchart div。
子组件是React.memo（用于性能优化），因此隐藏的图表在可见后不会自动调整大小。
让每个图表窗口都根据窗口大小调整大小。以下代码放置在App.js中。它会查找所有现有图表并对其进行重排：

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

第二个代码沙箱链接为here。

与第一个代码沙箱几乎相同，但是有一个引用数组来引用每个图表。
需要重排的图表在其图表选项中带有一个id。
迭代每个图表并获取具有该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();
    }

重排该图表。

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} />

react-highcharts如何调用reflow？

2 个答案: