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()。

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