Итак, моя проблема в том, что когда я циклически обновляю элемент canvas в моем HTML с помощью линейного графика, созданного библиотекой Chart.js, я получаю кучу отдельных HTMLCanvasElements. Я заметил это, когда исправлял некоторые утечки памяти в моем коде, которые ранее приводили к сбою моей веб-страницы (chrome выдал страницу ошибки «aw snap»).
Мне удалось исправить большинство утечек памяти, но этот все еще беспокоит меня, и я беспомощен, потому что не знаю, почему это происходит ..
В моем HTML-коде есть элементы canvas, такие как:
<div class="kuvaaja"><canvas id="etaisyyskuvaaja"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja2"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja3"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja4"></canvas></div>
И вот как я получаю эти элементы в моем JavaScript (в функции window.onload):
pohjacanvas = document.getElementById("etaisyyskuvaaja");
pohjacanvas2 = document.getElementById("etaisyyskuvaaja2");
pohjacanvas3 = document.getElementById("etaisyyskuvaaja3");
pohjacanvas4 = document.getElementById("etaisyyskuvaaja4");
Затем я запускаю циклическое обновление этих полотен (также внутри window.onload):
paivitysvali = setInterval(haeetaisyysmittaukset, 1000);
painepaivitys = setInterval(haepainemittaukset, 1000);
И в этих функциях я сначала выбираю данные из базы данных следующим образом (haepainemittaukset () похож на этот, просто выбираются разные данные):
function haeetaisyysmittaukset() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
etaisyys = [];
ajat = [];
var mittaukset = JSON.parse(xmlhttp.response);
for (var i = 0; i < mittaukset.length; i++) {
etaisyys.push(mittaukset[i]["etaisyys"]);
ajat.push(mittaukset[i]["timestamp"]);
}
if (paivitysbitti == 1) {
etaisyys.reverse();
ajat.reverse();
luokuvaaja2(pohjacanvas, etaisyys, ajat);
luokuvaaja2(pohjacanvas4, etaisyys, ajat);
}
}
}
xmlhttp.open("POST", "haeetaisyysmittaukset.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("limit=" + mittausmaara);
}
После того, как данные извлекаются в глобальные массивы (etaisyys [] и ajat []), я вызываю функцию luokuvaaja2 () с холстом, который я хочу обновить, и этими массивами данных. И на этом этапе начинается проблема, по крайней мере, я так думаю. Вот как я пытаюсь реализовать это обновление canvas:
function luokuvaaja2(pohja, data, ajat) {
pohja.height = 400;
pohja.width = 700;
myChart = new Chart(pohja, {
type: 'line',
data: {
labels: ajat,
datasets: [{
data: data,
label: "Etaisyys",
borderColor: "blue",
fill: false
}
]
},
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
title: {
display: true,
text: 'Etaisyysmittaus'
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 6000
}
}]
}
}
});
}
Итак, я думаю, что здесь я задаю высоту и ширину холста, после чего я создаю новый график в того же холста, где старый был (или я?). Однако, похоже, что что-то не так, и мой текущий код создает кучу отдельных элементов canvas, но я не могу понять, почему и где это происходит? Так что теперь объем памяти моей страницы медленно увеличивается после каждого цикла (обновление холста).
Вот также снимок распределения памяти:
распределение памяти
В этом распределении памяти есть много отдельных элементов canvas, указывающих на эти холсты (pohjacanvas, pohjacanvas2, pohjacanvas3, pohjacanvas4).