实时更新 chart.js 个条形图

Question

我正在使用 Chart.js 创建一个只有两行和 2 组数据的简单条形图。我是图书馆的新手，在阅读示例后，我对那里的大部分内容感到满意。这是我目前所拥有的

图表的JS代码：

var helpers = Chart.helpers;
var canvas = document.getElementById('bar');


var barChartData = {
    labels: ["IBM", "Microsoft"],
    datasets: [{
      label: "Product A",
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",

      data: [25, 75]
    }, {
      label: "Product B",
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",

      data: [75, 25]
    }]

  }
  // 
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: false,
})

;

现在，我想知道是否可以在不刷新页面的情况下实时更改数据来更新此图。例如，如果每秒数据值不断交换或发生随机事件，则图表应反映这些变化。我搜索了很多但没有找到合适的文档或教程来解释这个，如果有人能告诉我如何做到这一点，我将不胜感激。

这是我目前为工作创建的 FIDDLE。

Answer 1

您可以直接使用方法 addData()，示例：

bar.addData([40, 60], "Google");

工作示例 - http://jsbin.com/kalilayohu/1/

Answer 2

这是代码

var canvas = document.getElementById('myChart');
var myBarChart = Chart.Bar(canvas,{
data:{
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset", 
        data: [65, 59, 80, 81, 56, 55, 40],
        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:[{
        stacked:true,
        gridLines: {
        display:true,
        color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
         }
       }]
    }
  }
 });

您可以这样做更新：

myBarChart.data.datasets[0].data[4] = 50;//this update the value of may
myBarChart.update();

实时更新 chart.js 个条形图

Updating chart.js bar graph in real time

javascript

jquery

chart.js