javascript - 当 React 中的状态发生变化时 HighCharts 不会更新

Question

我正在开发一个快速程序，该程序从 enzyme react 中获取数据并将其绘制成图表。我遇到了这个问题，如果我在 props 中将数据传递给它，我的 highcharts 组件将不会更新。我可以看到控制台中的状态数据正在发生变化，但我在图表上看不到任何内容。

图表组件:

class HighGraph extends Component {
  state = {
    title: {
      text: "My chart"
    },
    series: [
      {
        data: [1, 2, 3]
      }
    ]
  };

  componentDidMount() {
    let _this = this;

    _this.interval = setInterval(function() {
      console.log(_this.state.series[0].data);
      _this.state.series[0].data = _this.props.list;
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state} />
      </div>
    );
  }
}

export default HighGraph;

我传递 Prop 的方式:

    <div>
      <HighGraph list={this.state.graphdata} />
    </div>

传递的数组:

[0.003, 0.006, 0, 0, 0.003, 0.006, 0.006, 0, 0.003, 0.006, 0.003, 0.003, 0.006, 0.006, 0.006, 0.006, 0.006, 0.006, 0.003, 0, 0.003, 0.003, 0.006, 0.003, 0.003, 0.003, 0.006, 0.003, 0.01, 0.006, 0, 0.003, 0.003, 0.003, 0.003, 0.003, 0.006, 0.003, 0, 0.006, 0.006]

有什么想法吗？尽管控制台告诉我状态已更改，但我仍然在图表中看到 1,2,3

Answer 1

设置 updateArgs 对我有用，记录在 https://github.com/highcharts/highcharts-react#readme 上

<HighchartsReact
                    highcharts={Highcharts}
                    options={ALARM_COUNT_CHART}
                    updateArgs={[true]}
                  />