Chart.js 更新函数(chart,labels,data) 不会更新图表

Question

我无法调试以下代码。 我想更新图表数据（不是在顶部添加；删除当前数据并添加全新的数据集）。 （不是）codepen 上的工作示例：

https://codepen.io/anon/pen/bvBxpr

var config = {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
       label: "My First dataset",
       data: [65, 0, 80, 81, 56, 85, 40],
       fill: false
    }]
   }
 };

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, config);

    labelsNew = ["Why", "u", "no", "work", "???"];
    dataNew = [2, 4, 5, 6, 10];

    function updateData(chart, label, data) {
      removeData();
      chart.data.labels.push(label);
      chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
      });
      chart.update();
    };

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

$('.button-container').on('click', 'button', updateData(myChart, labelsNew, dataNew));

Answer 1

我看到2个问题：

• 在函数updateData()缺少removeData(chart);图表参数removeData(chart);
• 按钮的单击处理程序，只需使用： $("#btn").click(function() { updateData(myChart, labelsNew, dataNew) });

Answer 2

我想到了。 这有效：

function addData(chart, label, data) {
    chart.data.labels = label
    chart.data.datasets.forEach((dataset) => {
        dataset.data = data;
    });
    chart.update();
}

$("#btn").click(function() {
addData (myChart, labelsNew, dataNew);
});

而不是推送数据（添加数据），需要通过“ =”分配数据。

Answer 3

 var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [65, 0, 80, 81, 56, 85, 40], fill: false }] } }; var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, config); labelsNew = ["Why", "u", "no", "work", "???"]; dataNew = [2, 4, 5, 6, 10]; function addData(chart, label, data) { chart.data.labels = label chart.data.datasets.forEach((dataset) => { dataset.data = data; }); chart.update(); } function clickupdate(){ addData(myChart, labelsNew, dataNew); }

 .chart-container { height: 300px; width: 500px; position: relative; } canvas { position: absolute; }

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div class="button-container"> <button onclick="clickupdate()">Change Data</button> </div> <div class="chart-container"> <canvas id="myChart"></canvas> </div>