使用Highcharts React包装器更新系列

Question

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

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

这是一个工作演示在演示中，我找不出为什么，当你在选择上选择和选项，然后选择回来时，它什么都没做，但它在我的项目中有效，所以不用担心。

编辑：在演示中，我有一个选择。选择不是问题所在。问题是我不知道如何将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