0

我使用了https://www.npmjs.com/package/react-chartjs-2，它第一次显示了一个带有数据的图表。但每当我尝试重绘，使用新数据和数据集时，它总是在图表上显示以前的图形数据。

我尝试过以下解决方案：https ://github.com/reactchartjs/react-chartjs-2

也试过给参考

但是，它仍然显示了与第一次加载相同的数据。

显示图表的代码，

 <Line
      data={graphData}
      redraw
      options={options}
      height="100px"
      weight="100px"
 />

其中， graphData是， const [graphData, setGraphData] = useState(data);

重绘，我也尝试过，redraw={true}

当数据将被修改时，我使用setGraphData(updatedData)更新图表，我也检查了数据是否被改变。

graphData中的数据更新但未显示在图表上

其中指定为graphData的默认数据的数据，

const data = {
    labels: months,
    datasets: [
        {
            label: "# of Users",
            data: [0, 64, 129, 193, 258, 322, 387, 451, 516, 580],
            fill: false,
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgba(255, 99, 132, 0.2)",
            yAxisID: "y-axis-1",
        },
        {
            label: "# of Orders",
            data: [0, 25, 50, 76, 101, 126, 151, 177, 202, 227],
            fill: false,
            backgroundColor: "rgb(54, 162, 235)",
            borderColor: "rgba(54, 162, 235, 0.2)",
            yAxisID: "y-axis-2",
        },
    ],
};

我正在创建此数据的副本，然后在 setGraphData() 中分配

任何人都可以帮助我！先感谢您！！

4

2 回答 2

0

没有看代码，这里只有一个解决方案。为图表组件提供密钥并在数据更新后更新密钥，

<chart key={getKey()} data={data} />

获取键将创建一个关于新数据的唯一键。

  const getKey = () => {
    return data?.map((p) => p.id)?.join();
  };

这里唯一重要的是，如果数据更新，getKey 方法应该返回一个新值JSON.stringify(data)是最简单的选择（我不确定将序列化数据作为键提供是否是一种好方法，但肯定会起作用）

于 2021-05-03T05:31:41.550 回答
0

重新渲染背后的问题是定义为调用后端 API 处理程序并将数据分配给折线图的函数。

之前- 不工作

useEffect(() => {
      ...
      the function which has code to call and fetch data from back-end API/handler
    }, []);

下班后

useEffect(() => {
       ...
       Code which calls back-end API/handler function to fetch data for graph
       ...
    }, []);

我也一直在重绘，

<Line
     key={JSON.stringify(graphData)}
     data={graphData}
     redraw
     options={options}
     height="100px"
     weight="100px"
 />
于 2021-05-03T09:40:48.280 回答