Graph 渲染完成后执行函数

Question

我想在成功渲染图表后执行一个函数。 SuccessRendering() 在显示完成之前运行。任何想法我们怎么能做到这一点？我想在显示完成后在SuccessfulRendering()函数中截取屏幕截图，所以我必须等待图形完全渲染。

代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

class LineChart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // To avoid unnecessary update keep all options in the state.
      chartOptions: {
        xAxis: {
          categories: ['A', 'B', 'C'],
        },
        series: [
          { data: [1, 2, 3] }
        ]
      },
      hoverData: null
    };
  }


  SuccessfulRendering=()=>{
    console.log('Successfully rendered!!')
  }

  updateSeries = () => {
    // The chart is updated only with new options.
    this.setState({ 
      chartOptions: {
        series: [
          { data: [Math.random() * 5, 2, 1]}
        ]
      }
    },()=>{
      this.SuccessfulRendering()
    });

  }

  render() {
    const { chartOptions, hoverData } = this.state;

    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />
      <h3>Hovering over {hoverData}</h3>
      <button onClick={this.updateSeries.bind(this)}>Update Series</button>
      </div>
    )
  }
}

render(<LineChart />, document.getElementById('root'),()=>{
});

Answer 1

我认为您正在努力解决的问题与动画有关。在这种情况下，您应该使用 setTimeout 将其禁用或延迟成功渲染函数的调用。

图表更新后无动画演示：https://codesandbox.io/s/highcharts-react-demo-2volr

API：https://api.highcharts.com/highcharts/chart.animation

Answer 2

您是否尝试过使用callback？检查它here