如何使用Javascript更新chart.js

问题描述

使用新数据更新条形图（chartJS）的正确方法是什么？

通过下面的代码，我可以获取条形图以更新新数据。 但是如果仔细检查，看起来更新后的图形就位于原始图形之上。 当我将鼠标悬停在图表上时，它在新旧之间来回跳跃。 我很难理解文档。

也许这是我的HTML？

HTML：

<div>
    <form id="frm2">
        <h7> filter by dates </h7>
        <input type="button" onclick="runGraphButton(updatedCountList, updatedDayCount)" value="update graph">
    </form>
</div>

<div class="chartleft">
    <div id = "buildCountInfo-js">To:</div>
    <canvas id="buildCount"></canvas>
</div>

.js文件

//intial data
let countList = [3,4,5,4,37,8,4];
let dayCount = [1,1,3,4,5,3,2];

//updated data
let updatedCountList = [3,4,5,4,37,8,4,6,4,7,8,5];
let updatedDayCount = [1,1,3,4,5,3,2,4,5,4,3,2];

//run at page load
runGraph(countList, dayCount);

//run at button push
function runGraphButton(updatedCountList, updatedDayCount){
    runGraph(updatedCountList,updatedDayCount);
}

function runGraph(counts,days){
let ctx = document.getElementById("buildCount").getContext('2d');
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: counts,
        datasets: [{
            label: 'Builds per Day',
            data: days,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {stepSize: 1,
                     beginAtZero:true
                }
            }]
        }
    }

});

removeData(myChart);
function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}
}

只需将更新功能更改为

//run at button push
function runGraphButton(updatedCountList, updatedDayCount){
    chart.data.labels = updatedCountList;
    chart.data.datasets[0].data = updatedDayCount;
    chart.update();
}