Javascript ChartJS 永久更新图表和 Canvas

Question

我在 ChartJS 中制作了一个图表，我想根据用户从下拉列表中选择的内容使用新数据来更新它，并使用相同的 Canvas 。问题是当我执行更新功能时，图表会使用新数据进行更新，但一段时间后它会不断返回到原始图表。我该如何解决这个问题？这是代码，谢谢您的帮助:

/* Original Chart */
var ctx3 = document.getElementById("canvas3").getContext("2d");

var canvas3 = new Chart(ctx3, {
    type: 'line',
    data: {
        labels: stationRentalsLabels,
        datasets: [{
            label: 'Wypożyczenia',
            fillColor: "rgba(220,280,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            backgroundColor: "rgba(153,255,51,0.4)",
            data: stationRentalsData
        }]
    }
});

/* event listener on drop-down list, when triggered, update chart */
select.addEventListener('change', function() {
    updateChart()
});

/* Update Chart */
function updateChart() {
    var stationRentalsHoursTemp = [];
    var stationRentalName = [];

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML;
    for (var i = 0; i < stationRentalsHours.length; i++) {
        if (determineHour == stationRentalsHours[i]) {
            stationRentalsHoursTemp.push(stationRentalsData[i])
            stationRentalName.push(stationRentalsLabels[i]);
        }
    }

    /* Updated Chart */
    var ctx3 = document.getElementById("canvas3").getContext("2d");
    var canvas3 = new Chart(ctx3, {
        type: 'line',
        data: {
            labels: stationRentalName,
            datasets: [{
                label: 'Wypożyczenia',
                fillColor: "rgba(220,280,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                backgroundColor: "rgba(153,255,51,0.4)",
                data: stationRentalsHoursTemp
            }]
        }
    });
}

Answer 1

您将在与之前相同的 div 中通过 update 函数创建新图表，但为此，您需要在调用 updateChart 函数之前调用 destroy 函数来销毁图表的先前实例。

canvas3.destroy();

解决问题的另一种方法是在调用 updateChart 函数时通过调用更新函数替换数据而不是图表本身(而不是初始化新图表)

function updateChart() {
    var stationRentalsHoursTemp = [];
    var stationRentalName = [];

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML;
    for (var i = 0; i < stationRentalsHours.length; i++) {
        if (determineHour == stationRentalsHours[i]) {
            stationRentalsHoursTemp.push(stationRentalsData[i])
            stationRentalName.push(stationRentalsLabels[i]);
        }
    }
    // just update the label and dataset not the entire chart
    canvas3.data.labels = stationRentalName;
    canvas3.data.datasets[0].data = stationRentalsHoursTemp;
    canvas3.update();

}