Javascript 高图表回流重图表滞后

在侧边栏关闭后，我使用回流API调整图表的大小

等待侧边栏关闭花费了很长时间

const series = [];
const seriesAmount = 200;

for (var i = 0; i < seriesAmount; i++) {
  series.push({});
  series[i].data = [];
  for (var j = 0; j < 288; j++) {
    series[i].data.push(Math.random());
  }
}
const options = {
  series: series
};

但是当seriesAmount>=200 | | seriesAmount=300时非常滞后

const seriesAmount = 300;

我尝试先破坏图表，然后创建一个新的图表，但不起作用

const toggleHidden = () => {
  this.setState({
    isHidden: !this.state.isHidden
  });

  Highcharts.charts.forEach((chart, idx, array) => {
    setTimeout(() => {
      chart.destroy();
    }, 10);
  });
};

---

希望有办法解决这个问题，谢谢

您可以改进的内容：

在每次渲染中都会重新计算序列。最好在构造函数中创建一次

---

---

现场演示：

---

文档：

谢谢！我会考虑你的建议！

const toggleHidden = () => {
  this.setState({
    isHidden: !this.state.isHidden
  });

  Highcharts.charts.forEach((chart, idx, array) => {
    setTimeout(() => {
      chart.destroy();
    }, 10);
  });
};

constructor(props) {
  super(props);

  const series = [];
  const seriesAmount = 200;
  for (var i = 0; i < seriesAmount; i++) {
    series.push({});
    series[i].data = [];
    for (var j = 0; j < 288; j++) {
      series[i].data.push(Math.random());
    }
  }

  this.state = {
    isHidden: false,
    chartOptions: {
      series
    }
  };
}

<HighchartsReact
  allowChartUpdate={false}
  highcharts={Highcharts}
  containerProps={{ style: { height: "300px" } }}
  options={this.state.chartOptions}
/>