Highcharts 重排图表滞后

Question

侧边栏关闭后，我使用 Reflow 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 < 100时，速度尚可，

const seriesAmount = 50;

但是当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);
  });
};

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

Answer 1

您可以改进的地方：

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

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

由于状态改变，图表在回流之前更新。将 allowChartUpdate 设置为 false，以防止出现这种情况。

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

现场演示： https://codesandbox.io/s/exciting-rain-gkyjd?file=/src/index.js

文档： https://github.com/highcharts/highcharts-react#optimal-way-to-update

Highcharts 重排图表滞后

Highcharts Reflow Heavy Chart Lagging

javascript

highcharts

reactjs