如何使用 Javascript 更新 chart.js

Question

使用新数据更新条形图 (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();
}
}

Answer 1

chart.destroy() 将销毁任何已创建的图表实例。这将清除存储在 Chart.js 中的图表对象的所有引用，以及 Chart.js 附加的任何关联事件侦听器。

所以如果你想加载一个全新的数据集，你可以事先调用chart.destroy()。我稍微重构了您的代码，这似乎有效：

let myChart; // declare chart variable

//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
myChart = runGraph(countList, dayCount);

//run at button push
function runGraphButton(updatedCountList, updatedDayCount) {
  myChart.destroy();  // call destroy before loading new dataset
  myChart = 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
          }
        }]
      }
    }

  });
  return myChart; // return chart object
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<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>

请注意，我还删除了 removeData() 方法，因为我正在调用 destroy()。

Answer 2

只需将更新功能更改为

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