Question

我想在成功渲染Graph之后执行一个函数。显示完成之前，SuccessfulRendering（）正在运行。任何想法我们该怎么做？显示完成后，我想在SuccessRendering（）函数中截取屏幕截图，这就是为什么我必须等待图形完全渲染的原因。

代码：

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

您是否尝试过使用callback？选中here

Answer 2

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

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

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

Graph渲染完成后执行函数

2 个答案: