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.update()，我更喜欢chart.destroy()。

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

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

多个图表应该不是问题，您也不必破坏图表。