Javascript ChartJS 永久更新图表和画布

Question

我在chartJS中制作了一个图表，我想根据用户从下拉列表中选择的内容使用新数据更新它，使用相同的画布。问题是当我执行更新功能时，图表会用新数据更新，但过一会儿又会回到原始图表。我该如何解决这个问题？下面是代码，感谢大家的帮助:

/* 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 中创建新的更新函数图表，但为了做到这一点，您需要在调用 updateChart 函数之前通过调用销毁函数来销毁图表的上一个实例。

canvas3.destroy（）

解决问题的另一种方法是，当通过调用 update 函数（不初始化新图表）调用 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();

}