ChartJS 重新渲染错误

Question

所以我正在构建一个交易工具并使用 chartJS 制作图表。这就是我的图表现在在页面上的样子：

所以我的问题是，当我更改图表的时间段时，图表随机显示旧数据与新数据混合。

您可以在此处查看行为：https://gifyu.com/image/vda5

目前我不能在同一页面上同时使用大图表和小图表，因为有计时周期的大图表也有多个 AJAX 调用，所以每次我点击“1W”时，例如，一个新的正在调用并绘制图表。

我尝试过的事情：

我知道对于chartJS中的动态图表我必须销毁图表，所以我正在使用

if (window.chart !== undefined)  window.chart.destroy();

对于小图表，我使用一个空数组并将元素推入其中。这是我的做法：

if ($(quoteDisplayEl).hasClass('quoteDisplay-light')) {
    chartHandel.push(quoteChart);
} else {
    window.chart = quoteChart;
}

因此，对于大图表，我将其分配给全局变量，将小图表分配给空数组 - 这样我可以在一页上拥有多个图表。

但是为了销毁大图表，我应该从头开始销毁并重新渲染所有图表（我猜），我尝试了多种方法来实现这一目标。

不幸的是，代码超过 500 行，并且有大量来自 API 和 DB 的可变数据，因此我无法制作小提琴演示。

Answer 1

比起chart.destroy()，我更喜欢chart.update()。

Here's a small, simple example how I usually update data.

1. 我为每个图表制作一个对象，其中包含标签（空数组）和数据（空数组）和颜色以及您需要的所有内容。
2. 我用我得到的数据 (AJAX) 填充这些数组。
3. 可选：如果我获取了所有数据并需要对其进行过滤以显示更少的数据，我将复制我的对象以保留我获取的所有数据，并将我现在需要用于图表的所有数据保存在另一个对象中
4. 创建一个updateChart() 函数，它可以更改您显示的数据或备份对象中保存的数据，或者使用来自新 AJAX 请求的新数据。
5. 以chart.update() 结束updateChart()（或任何您的图表名称）。

多个图表应该不是问题，您不必销毁图表。