用chart.js绘制条形图

drawing bar chart with Chart.js

本文关键字：条形图 绘制 js chart      更新时间：2023-09-26

我正在尝试用chart.js绘制条形图。只是无法在屏幕上显示任何内容，没有显示错误消息。我做错了什么？

cdnhttps://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>

在使用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，输出

您不能在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);
相关文章：