我正在使用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并再次开始循环更新)时,重新呈现不再起作用了。
有人能告诉我为什么我的图表更新了新的数据,因为他们应该,但画布被清空?
首先,我想也许我需要再次获取canvas元素,并将它们传递给update-function,如果chart-instance在删除html内容后丢失了原始canvas,然后将其加载回去或其他东西。
但是,我无法找到更新这些画布的解决方案,所以我设法解决了这个问题,如下所示:
当返回到首页时,我首先循环遍历图表数组,并删除所有应该在首页中的图表(上次加载首页时创建)。然后,在加载html内容后,我再次创建这些图表,并将它们保存在我的图表数组中。现在,当我开始循环更新那些新创建的图表,更新工作再次像一个魅力!