javascript - 使用 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