在react-highcharts中动态更改系列数据,而无需重新呈现图表

Question

我用了创建折线图react-highcharts.它有3个系列和不同的数据.我有一个范围选择器,可以动态更改系列的数据.该图表如下所示: 它工作得很好,但问题是每当我更改范围选择器上的风险值时,图表会重新呈现新系列的数据.我不希望它每次都重新渲染.我希望系列的数据随动画变化.像这样的东西:实时随机数据.这是我的相关代码:

class ContributionRiskGraph extends React.Component {
  constructor() {
    super();

    this.state = {
      riskValue: 8.161736
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({
      riskValue: value
    });
  }

  render() {
    const riskValue = this.state.riskValue / 100;
    const LBData = getGraphPlotData(riskValue, 'lowerBound');
    const EVData = getGraphPlotData(riskValue, 'expectedValue');
    const UBData = getGraphPlotData(riskValue, 'upperBound');

    const config = {
      chart: {
        animation: {
          duration: 1000
        }
      },
      title: {
        text: 'Contribution Risk Graph'
      },
      series: [
        {
          name: 'Lower Bound',
          data: LBData,
          type: 'spline',
          tooltip: {
            valueDecimals: 2
          }
        },
        {
          name: 'Expected Value',
          data: EVData,
          type: 'spline',
          tooltip: {
            valueDecimals: 2
          }
        },
        {
          name: 'Upper Bound',
          data: UBData,
          type: 'spline',
          tooltip: {
            valueDecimals: 2
          }
        }
      ],
      yAxis: {
        gridLineWidth: 0,
        opposite: true
      },
      xAxis: {
        gridLineWidth: 2,
        labels: {
          formatter: function() {
            if (this.value <= 1) {
              return this.value + ' month';
            }
            return this.value + ' months';
          }
        }
      },
    };

    return(
      <div>
        <ReactHighcharts config={config} />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 30 }}>
          <RangeSlider
            label="Risk Value"
            defaultValue={8}
            min={1}
            max={62}
            handleChange={this.handleChange}
          />
        </div>
      </div>
    )
  }
}

Answer 1

所以,我找到了一个解决方法.它工作得很好.我正在获取图表ref,然后使用设置新数据setData.这仅更新数据而不是重新渲染整个图表组件.我正在使用组件生命周期方法shouldComponentUpdate来停止重新呈现组件.这是相关的代码:

class ContributionRiskGraph extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      riskValue: 8.161736
    };

    this.handleChange = this.handleChange.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.riskValue !== nextState.riskValue) {
      return false;
    }
  }

  handleChange(value) {
    this.setState({
      riskValue: value
    });

    let riskValue = this.state.riskValue / 100;
    let chart = this.crg.getChart();
    chart.series[0].setData(getGraphPlotData(riskValue, 'lowerBound'), true);
    chart.series[1].setData(getGraphPlotData(riskValue, 'expectedValue'), true);
    chart.series[2].setData(getGraphPlotData(riskValue, 'upperBound'), true);
  }

  render() {
    // other code
    return(
      <div>
        <ReactHighcharts config={config} ref={a => this.crg = a} />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 30 }}>
          <RangeSlider
            label="Risk Value"
            defaultValue={8}
            min={1}
            max={62}
            handleChange={this.handleChange}
          />
        </div>
      </div>
    ) 
  }
}