admin 管理员组

文章数量: 1184232

I cannot debug the following code. I would like to update chart data (not add on top; delete current data and add pletely new dataset). (Not)Working example on codepen:

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));

I cannot debug the following code. I would like to update chart data (not add on top; delete current data and add pletely new dataset). (Not)Working example on 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));
  • javascript
  • chart.js
Share edited Mar 29, 2018 at 9:23 lovemyjob asked Mar 19, 2018 at 10:01 lovemyjoblovemyjob 5791 gold badge5 silver badges22 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 7

I figured it out. This works: 

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);
});

instead of pushing the data (which adds on), data needs to be allocated by " = ".

I see 2 problems:

  • in function updateData() missing chart argument to removeData(chart);
  • click handler for button, use simply: $("#btn").click(function() { updateData(myChart, labelsNew, dataNew) }); 

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/npm/chart.js"></script>
<div class="button-container">
  <button onclick="clickupdate()">Change Data</button>
</div>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：javascript - Chart.js update function (chart,labels,data) will not update the chart - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1743675405a2460751.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。