Chart.jsの棒グラフ

Question

私はChart.jsで棒グラフを描こうとしています。画面に何も表示されず、エラーメッセージも表示されません。私は間違って何をしていますか？

CDN

<script> 
var income = document.getElementById("income").getContext("2d"); 
new Chart(income).Bar(barData); 
var barData = { 
labels : ["January","February","March","April","May","June"], 
datasets : [ 
    { 
     fillColor : "#48A497", 
     strokeColor : "#48A4D1", 
     data : [456,479,324,569,702,600] 
    }, 
    { 
     fillColor : "rgba(73,188,170,0.4)", 
     strokeColor : "rgba(72,174,209,0.4)", 
     data : [364,504,605,400,345,320] 
    } 

] 
} 
</script> 

<canvas id="income" width="600" height="400"></canvas> 

Answer 1

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.jsあなたあなたはこのように、上部に、それを使用する前にbarDataデータオブジェクトを定義する必要があります。

var barData = { 
labels : ["January","February","March","April","May","June"], 
datasets : [ 
    { 
     fillColor : "#48A497", 
     strokeColor : "#48A4D1", 
     data : [456,479,324,569,702,600] 
    }, 
    { 
     fillColor : "rgba(73,188,170,0.4)", 
     strokeColor : "rgba(72,174,209,0.4)", 
     data : [364,504,605,400,345,320] 
    } 

] 
}; 

var income = document.getElementById("income").getContext("2d"); 
new Chart(income).Bar(barData); 

http://jsbin.com/yoguzuwoha/1/edit?html,js,output

Answer 2

あなたがすることはできませんbarDataの前にあなたのチャートを読み込み、何も変更する必要はありませんbarDataの後にあなたのチャートをロードする。

var barData = { 
labels : ["January","February","March","April","May","June"], 
datasets : [ 
{ 
    fillColor : "#48A497", 
    strokeColor : "#48A4D1", 
    data : [456,479,324,569,702,600] 
}, 
{ 
    fillColor : "rgba(73,188,170,0.4)", 
    strokeColor : "rgba(72,174,209,0.4)", 
    data : [364,504,605,400,345,320] 
} 

] 
}; 

var income = document.getElementById("income").getContext("2d"); 
new Chart(income).Bar(barData);