2

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

从文档中可以看出：

要访问 Highcharts 库中的方法和属性，您可以使用 ReactHighcharts.Highcharts。例如，Highcharts 选项可通过 ReactHighcharts.Highcharts.getOptions() 获得。

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

有任何想法吗？

编辑

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

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

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

4

2 回答 2

1

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

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

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

  1. App.js 上有一个按钮可以隐藏和显示 highchart 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. 重新排列该图表。
于 2020-10-01T02:58:48.223 回答
1

可以使用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} />
于 2021-03-12T10:57:23.260 回答