在使用JavaScript更新画布时，如何避免分离的HTMLCanvase元素？

所以我的问题是，当我用chart.js库创建的折线图周期性地更新HTML中的canvas元素时，我得到了一堆分离的HTMLCAvase元素。我在修复代码中的一些内存泄漏时注意到了这一点，这些泄漏导致我的网页崩溃（chrome给出了“aw snap”错误页面）。 我能够修复大部分内存泄漏，但这一次仍然困扰着我，我很无助，因为我不知道为什么会发生这种情况

我的HTML代码中有如下画布元素：

<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>

然后我开始循环更新这些画布（也在window.onload内）：

在这些函数中，我首先像这样从数据库中获取数据（haepainemittaukset（）与此类似，只是获取了不同的数据）：

所以我想我在这里要做的是设置画布的高度和宽度，然后我在旧画布的同一画布上创建新图表。然而，看起来好像有什么地方出了问题，我当前的代码正在创建一堆分离的画布元素，但我不明白这到底是为什么发生的，在哪里发生的？所以现在我的页面的内存占用在每个周期（画布更新）后都在缓慢增加

下面是内存分布的快照： 在此内存分布中，有许多分离的画布元素都指向这些画布（pohjacanvas、pohjacanvas2、pohjacanvas3、pohjacanvas4）。

您应该跟踪（例如，在数组中）以前创建的图表，然后从服务器获取新数据时，您需要检索要更新的图表，更新其数据和/或选项，然后调用

chart.update();

刷新图表。在这种情况下，您不会在每次更新时创建新图表。

---

您可以在中找到更多详细信息。

太棒了，谢谢！使用chart.update（）我能够更新我的旧图表并摆脱一堆旧图表。在Chart.js文档中有一些示例，其中数据是推式和拉式的，但也可以直接更改数据集中的数据，如下图所示

paivitysvali = setInterval(haeetaisyysmittaukset, 1000);
painepaivitys = setInterval(haepainemittaukset, 1000);

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);
}

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
                    }
                }]
            }
        }
    });

}

chart.update();