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

使用Chart.js绘制条形图

2 个答案: