用Chart.js繪製條形圖

Question

我在用Chart.js繪製一個條形圖。只是不能讓任何東西顯示在屏幕上，沒有顯示錯誤信息。我究竟做錯了什麼？

CDN https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js

<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

你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);