ライブjsonデータを円グラフと棒グラフで表示する方法

Question

ライブJSONデータを円グラフと棒グラフで表示したいとします。手動でデータを表示することはできますが、グラフにはJSONデータを表示することはできません。データに静的に挿入されているライブデータを表示するチャートの例を1つ挙げました。

var canvas = document.getElementById('myChart'); 
 
var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      backgroundColor: "rgba(255,99,132,0.2)", 
 
      borderColor: "rgba(255,99,132,1)", 
 
      borderWidth: 2, 
 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
 
      hoverBorderColor: "rgba(255,99,132,1)", 
 
      data: [65, 59, 20, 81, 56, 55, 40], 
 
     } 
 
    ] 
 
}; 
 
var option = { 
 
\t scales: { 
 
    \t yAxes:[{ 
 
    \t \t stacked:true, 
 
     gridLines: { 
 
     \t display:true, 
 
      color:"rgba(255,99,132,0.2)" 
 
     } 
 
    }], 
 
    xAxes:[{ 
 
    \t \t gridLines: { 
 
     \t display:false 
 
     } 
 
    }] 
 
    } 
 
}; 
 

 
var myBarChart = Chart.Bar(canvas,{ 
 
\t data:data, 
 
    options:option 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>

Answer 1

だけでチャートを作成するときに渡されたconfigオブジェクトに新しいデータ/ラベルをプッシュして、あなたのチャート上update（）を呼び出します。

setTimeout(function(){ 
    data.labels.push('August'); 
    data.datasets[0].data.push(66); 
    myBarChart.update(); 
}, 1000) 

http://jsfiddle.net/zpnx8ppb/21/