如何在数据更新后重新加载图表？

Question

我有一个带有下拉菜单的页面，我可以在其中 select 一个选项（数据源）并加载几个图表。之后，如果我 select 其他数据源图表也应该更新。

当我select其他数据源图表没有更新。我知道我的变量正在正确更新，而且我的图表调用正在使用相同的变量。

这里是主模块

function Content() {
  const [chartData, setChartData] = useState(
    mockData.map(series => ({
      ...series,
      data: series.data.map(point => {
        const dateArr = point[0].split("-");
        return [Date.UTC(dateArr[0], dateArr[1], dateArr[2]), point[1] * 100];
      })
    }))
  );
  const handleSelectedOptionChange = evt => {
    const selectedOption = evt.target.value;
    if (selectedOption === 1) {
      setChartData(() => {
        mockData.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
    if (selectedOption === 2) {
      setChartData(() => {
        mockData2.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
  };
  return (
    <>
      <FormControl>
        <InputLabel htmlFor="grouped-native-select">Choose</InputLabel>
        <Select
          id="selector"
          name="selector"
          onChange={handleSelectedOptionChange}
          defaultValue={1}
        >
          <option value={1}>First</option>
          <option value={2}>Second</option>
        </Select>
      </FormControl>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart data={chartData} />
        </Paper>
      </Grid>
    </>
  );
}

This 是一个 "working" 演示

我已经检查了问题，我的 HighchartsReact 已经设置为 allowChartUpdate。

我也检查了this问题，那里有一些解决方案。但我无法实施其中任何一个。因为他们都通过 JQuery 访问图表，而我不知道 react 情况的替代方案。

和this论坛post我遇到了和上面一样的问题，是JQuery方法调用。

感谢任何帮助。

Answer 1

嘿，问题是您正在尝试将道具与 CustomGUIChart 组件的状态同步，然后根据该状态渲染 UI。现在的问题是，由于构造函数仅在第一次将 props 设置为 state 并且图表正确呈现时运行，但是当 props 更改时，您的 state 无法知道，因此 chart 不会更改。

现在要解决这个问题，我们可以使用 getDerivedStateFromProps 生命周期方法，但更好的解决方案是不要将你的状态与你的道具同步，除非你真的必须这样做。只需在渲染方法中使用您的道具。

这是您的代码，按预期工作： https://codesandbox.io/s/update-data-source-8g27i?file=/src/CustomGUIChart.js

我现在让你的 CustomGUIChart 组件变得非常简单，你甚至可以把它变成一个函数式组件

希望对您有所帮助:)

如何在数据更新后重新加载图表？

How can I reload chart following data update?

javascript

highcharts

reactjs

react-highcharts