javascript - 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 的可变数据，因此我无法制作 fiddle 演示。

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

多个图表不应该成为问题，并且您不必销毁图表。