Question

我正在开发一个快速程序，该程序从酶反应中获取数据并将其绘制成图表。我遇到了这个问题，如果我在道具中向其传递数据，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;

我传递道具的方式：

    <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

如果您不调用this.setState()方法，React将不会使用新数据触发重新渲染。

尝试更改componentDidMount中的行。

它看起来像这样：

componentDidMount() {
  let _this = this;

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

Answer 2

设置updateArgs为我工作，https://github.com/highcharts/highcharts-react#readme

中有记录

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

Answer 3

我一直在处理一些类似的问题，在这些问题中，我尝试了很多相同的建议来添加oneToOne={true}和updateArgs={[true, true, true]}。

在我的应用程序中，我正在使用React Context api和useReducer来存储图表选项。通过将系列部分从系列数组更改为单个系列对象，我成功地重新绘制了图表。

您所在州的示例

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

您可以尝试更改为

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

由于某种原因，当尝试更改访问序列数组的状态时，它不会触发重新渲染。也可能会更改整个系列的状态，而不是访问state.series[0]进行更新。希望有道理。

Answer 4

在HighchartsReact组件中，您需要提供一个名为oneToOne的道具并将其设置为true。

<HighchartsReact highcharts={Highcharts} options={this.state} oneToOne={true} />

这告诉组件在通过State或Prop数据提供新数据时重新渲染。

ref：https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 5

我只是说说我自己的经验，希望这对某人有所帮助。出于某种莫名其妙的原因，我得到这个工作的唯一方法是使用系列的索引。
此代码有效且图表更新无需上述任何道具：

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          currentSeries[i].visible = true;
          return;
        }
        currentSeries[i].visible = !currentSeries[i].visible;

关键是通过索引访问每个系列的 visible 属性。此代码不起作用，以上都没有帮助：

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          s.visible = true;
          return;
        }
        s.visible = !s.visible;

当状态在React中更改时，HighCharts不会更新

5 个答案: