时间戳

首页 > 解决方案 > 已解决：系列数组更改后 React 顶点图表不呈现

reactjs - 已解决：系列数组更改后 React 顶点图表不呈现

问题描述

你会在这篇文章中找到答案

我是 react 新手，我使用了 apexcharts，它工作得非常好，但是当我不得不在同一个项目中的其他组件中使用这个图表组件时。那就是我在图表中遇到问题的地方。突然，当系列更改时，我的图表的 1 开始不再更新。我花了一周的时间弄清楚出了什么问题，并认为我可以在这里分享它，以便有人可以更早地找到此修复程序。

所以我发现了两件事；

  1. react-apexcharts 只是 apexcharts 的一个包装器，每个图表都应该有一个唯一的图表 ID，您可以在选项中定义它。因此，如果您想在多个地方使用您的组件，最好在道具中接收图表 ID 并将其设置为，
...
this.state = {
      options:  {
        chart: {
          id: props.chartId,
...
  1. 我们可以调用一个方法来渲染图表或通过在您的componentDidMount()或UseEffect()中使用全局 apexcharts 方法来覆盖图表的系列数组，例如，
import apexchart from "apexcharts";
...
  componentDidUpdate(){
    const {chartId, seriesData} = this.props;
    //here it overrides the chart series with seriesData from props
    apexchart.exec(chartId,'updateSeries', seriesData);
  };
...

如此处的文档中所述，我们可以从 apexcharts 使用其他大量有用的方法：https ://apexcharts.com/docs/methods/

我希望有人觉得它有帮助。

谢谢你。

标签： reactjschartsapexcharts

解决方案

推荐阅读