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

您可以使用方法NULL，例如：

addData()

工作示例 - 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条形图

2 个答案: