使用Highcharts React包装器更新系列

Question

我正在使用Highcharts React包装器实现应用程序。

我现在正在尝试添加一个按钮组，该按钮组将根据单击的按钮过滤数据，并将系列数据传递回图表。问题是：我不知道，似乎也找不到如何将这个新数据集传递到图表的任何地方。我发现的全部是使用jQuery的JS Vanilla的结果。有人知道使用React包装器的解决方案吗？

这里是工作中的demo。 在演示中，我无法找出原因，当您在select和select上进行选择，然后再选择回去时，它什么也没有做，但是它在我的项目中有效，因此不用担心。

编辑：在演示中，我有一个选择。选择不是问题。问题是我不知道如何将filteredData作为新的series传递到图表。

Answer 1

您需要以某种状态存储数据并在过滤时更新它：

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredData: this.props.data
    };
  }

  render() {
    const { data } = this.props;
    const { seriesOptions } = this.props;
    const handlePeriodClick = periodType => {
      const filteredData = data.map(option => ({
        ...option,
        data: option.data.filter(
          item =>
            moment(item[0]).diff(moment(item[0]).endOf(periodType), "days") ===
            0
        )
      }));

      this.setState({ filteredData });
    };

    ...

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          ...
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ style: { height: "500px", minWidth: "400px" } }}
            options={{
              series: this.state.filteredData.map((set, index) => ({
                ...set,
                type:
                  seriesOptions && seriesOptions[index].curveType
                    ? seriesOptions[index].curveType
                    : "line",
                cursor: "pointer"
              }))
            }}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

---

实时演示： https://codesandbox.io/s/update-data-source-r3lm9