JSX高图表性能

Question

我正在使用 react jsx highcharts 库使用 react 在单个页面上渲染多个图表 (20(。 我的问题是图表需要很长时间才能渲染，并且所有图表似乎都一次完成。 有谁知道解决方法或为什么会发生这种情况？

Answer 1

听起来您可能同时渲染所有图表(也许它们都是同一组件的子级(。如果是这种情况，您可以尝试等待每个图表完成加载，然后再转到下一个图表。

在HighCharts网站上，每个图表都是使用将DOM元素注入特定div的函数创建的。下面是一个组件的一些示例代码，该组件使用的对象具有由其目标div ID 键控的函数。

const exampleChartBuilder = {
  lineChart: function () { var lineChart = ... },
  barChart: function () { var barChart = ... },
  ...
};
class ChartGallery extends Component {
  state = {
    mounted: false,
  };
  componentDidMount() {
    this.loader(0);
    this.setState({ mounted: true });
  }
  componentWillUnount() {
    this.setState({ mounted: false });
  }
  loader(n) {
    exampleChartBuilder[n](); // load the Nth chart 
    if (this.state.mounted && n < Object.keys(chartBuilder).length - 1) {
        this.loader(n + 1)
    };
  }
  render() {    
    const divNodes = _.map(Object.keys(exampleChartBuilder), key => <div id={key}); 
    return (
      <div>
        { divNodes }
      </div>);
  }
} 

请注意，如果您的图表构建函数不同步，则必须等待异步函数完成，然后才能转到下一个图表。此外，如果任何图表或数据需要更改，那么我建议将每个图表的逻辑保留在其自己的组件中。但最终同样的逻辑也适用。