更新 Chart.js 图表时，数据已更新，但画布已清空

Question

我正在使用 Chart.js 在我的 html 页面中创建多个图表，并且在窗口加载后，图表每秒都会使用新数据值动态更新。我正在使用 Chart.js update() 函数处理更新。所有创建的图表都存储在全局数组中，然后获取这些图表进行更新。

当我第一次打开我的 html 页面并且图表每秒更新一次（显示实时测量数据）时，更新工作正常，但是当我移动到我的 web 应用程序中的另一个子页面然后返回到应该有图表的页面时，所有画布都是空的（图表中的数据正在更新，但画布保持空白）。

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

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

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

<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 内容（移至子页面）然后再次加载这些画布（返回首页并再次开始循环更新）时，重新渲染不再起作用。

有人能告诉我为什么我的图表按应有的方式更新了新数据，但画布却被清空了吗？

Answer 1

首先，我认为如果图表实例在删除 html 内容后确实错过了原始画布，然后将其加载回来或其他什么，我可能需要再次获取画布元素并以某种方式将它们传递给更新函数。

但是我无法找出更新这些画布的解决方案，因此我设法解决了这样的问题：

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