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