更新chart.js图表时，数据会更新，但画布会清空

Question

我正在使用chart.js在html页面中创建多个图表，并且在Windows加载之后，图表将以每秒的速度动态更新，并使用新的数据值。我正在使用chart.js update（）函数处理更新。所有创建的图表都存储在全局数组中，然后获取这些图表进行更新。

当我第一次打开html页面时，每秒都会更新图形（显示实时测量数据），但当我移动到webapp中的另一个子页面，然后返回到图形应该所在的页面时，所有画布都是空的（图表中的数据按照应该的方式更新，但画布保持空白）。

当我移动到subpage时，我只更新了部分html内容，包括那些画布所在的区域，当我返回frontpage时，我加载了与第一次打开网页时相同的html内容。

因此，当前我所做的是，当我返回到应该呈现图表的页面时，我从全局图表数组（第一次打开网页时创建的）获取旧图表，用新的数据集替换旧的数据集，然后调用chart.js update（）函数。我知道数据集每秒都在更新，就像我第一次打开网页时一样（我用控制台检查了一下），但是画布会被清空，所以那些更新的图表不会再显示在任何地方了。

这是我的画布在更新正常工作时：

<canvas id="etaisyyskuvaaja" height="200" width="350" class="chartjs-render-monitor" style="display: block; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>

这就是从子页面返回后尝试更新时的样子：

<canvas id="etaisyyskuvaaja"></canvas>

所以这就是我说的“清空”的意思。

我认为，当我更新在特定画布中创建的旧图表时，它应该在数据更新时自动呈现到相同的画布（实际上，当我第一次打开网页时html内容保持不变时，这确实是这样工作的）。然而，现在看来，当我更改了html内容（移动到子页面），然后再次加载那些画布（返回frontpage并再次开始循环更新）时，重新呈现不再起作用了。

有人能告诉我为什么我的图表更新了新的数据，因为他们应该，但画布被清空？

Answer 1

首先，我想也许我需要再次获取canvas元素，并将它们传递给update-function，如果chart-instance在删除html内容后丢失了原始canvas，然后将其加载回去或其他东西。

但是，我无法找到更新这些画布的解决方案，所以我设法解决了这个问题，如下所示：

当返回到首页时，我首先循环遍历图表数组，并删除所有应该在首页中的图表（上次加载首页时创建）。然后，在加载html内容后，我再次创建这些图表，并将它们保存在我的图表数组中。现在，当我开始循环更新那些新创建的图表，更新工作再次像一个魅力！