更新Chart.js圖表​​時，數據已更新，但畫布已清空

Question

我正在使用Chart.js在html頁面中創建多個圖表，並且在窗口加載后，圖表會使用新的數據值每秒動態更新一次。 我正在使用Chart.js update（）函數來處理更新。 所有創建的圖表都存儲在全局數組中，然后在其中提取它們以進行更新。

第一次打開html頁面並且圖形每秒更新一次（顯示實時測量數據）時，更新工作正常，但是當我移至Webapp中的另一個子頁面然后返回到圖形應包含的頁面時，所有畫布為空（圖表中的數據正在更新，但畫布保持空白）。

當我移到子頁面時，我僅更新html內容的一部分，包括那些畫布所在的區域，當我返回首頁時，與第一次打開網頁時相比，我向該區域加載的HTML內容與第一次相同。

因此，當前我正在做的是，當我返回應呈現圖表的頁面時，我從全局圖表數組（首次打開網頁時創建）中獲取了舊圖表，用新數據替換了舊數據集，然后調用了該圖表。 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內容（移至子頁面）然后再次加載這些畫布（返回首頁並再次開始循環更新）時，重新渲染似乎不再起作用。

有人可以說出為什么我的圖表應按需要使用新數據進行更新，但畫布卻被清空了嗎？

Answer 1

首先，我認為如果圖表實例在刪除html內容后確實錯過了原始畫布，然后又將其重新加載，則可能需要再次獲取canvas元素並將其以某種方式傳遞給update-function。

但是我無法找出解決方案來更新這些畫布，因此我設法解決了以下問題：

返回首頁時，我首先遍歷圖表數組，並刪除所有應該位於首頁中的圖表（上次加載首頁時創建）。 然后，在加載html內容之后，我再次創建那些圖表，並將它們保存在我的圖表數組中。 現在，當我開始對這些新創建的圖表進行循環更新時，更新再次像魅力一樣起作用！