在react-highcharts中动态更改系列数据，无需重新绘制图表

Question

我已使用react-highcharts创建了折线图。它有3个系列和不同的数据。我有一个范围选择器可以动态改变系列的数据。图表看起来像这样： 它的工作原理都正常，但问题是，每当我改变的范围内，选择风险值，图表与新系列的数据重新呈现。我不希望它每次都重新渲染。我希望系列的数据随动画改变。像这样的：Live random data。这里是我的相关代码：

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