在无反应图表中动态更改系列数据，而无需重新绘制图表 [英] Change series data dynamically in react-highcharts without re-render of the chart

问题描述

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

I have created a line chart using react-highcharts. It has 3 series and different data for each of them. And I have a range-selector that changes the data of the series dynamically. The chart looks like this: It works all fine but the problem is whenever I change the risk value on the range-selector, the chart re-renders with new series' data. I don't want it to re-render every time. I want the series' data change with animation. Something like this: Live random data. And here is my related code:

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

推荐答案

因此，我找到了一种解决方法.运行良好.我通过ref获取图表，然后使用setData设置新数据.这只会更新数据，而不是重新渲染整个图表组件.而且我正在使用组件生命周期方法shouldComponentUpdate来停止组件的重新呈现.这是相关的代码:

So, I have found a workaround. It is working perfectly. I am getting the chart by ref and then set a new data using setData. This only updates the data rather than re-rendering the whole chart component. And I am using component lifecycle method shouldComponentUpdate to stop the re-rendering of the component. Here is the related code:

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

这篇关于在无反应图表中动态更改系列数据，而无需重新绘制图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！