1

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

我传递道具的方式：

    <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

4

5 回答 5

6

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

<HighchartsReact
                    highcharts={Highcharts}
                    options={ALARM_COUNT_CHART}
                    updateArgs={[true]}
                  />
于 2019-08-27T11:40:51.510 回答
2

如果您不调用该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);
}
于 2019-01-20T01:18:08.923 回答
1

我一直在处理一些类似的问题，在这些问题中我尝试了很多相同的添加oneToOne={true}and的建议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]更新。希望这是有道理的。

于 2020-09-03T22:00:14.107 回答
0

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

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

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

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

于 2019-01-21T13:44:04.340 回答
0

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

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;
于 2021-05-26T14:54:48.693 回答