实时更新chart.js条形图

Question

我Chart.js用来创建一个只有两行和两组数据的简单条形图.我是使用该库的新手,在阅读完这些示例之后,我对大多数事情感到满意.这是我到目前为止所拥有的

图表的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/