Javascript 更新Chart.js Chart时，数据会更新，但画布会清空

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

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

当我移动到子页面时，我只更新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并再次开始循环更新）时，重新渲染似乎不再有效

---

有人能告诉我为什么我的图表会像应该的那样用新数据更新，但画布会被清空吗？

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

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

当返回到首页时，我首先循环浏览图表数组，并删除所有假定位于首页的图表（上次加载首页时创建）。然后，在加载html内容后，我再次创建这些图表，并将它们保存在我的图表数组中。现在，当我开始循环更新这些新创建的图表时，更新又像一个魅力