html 柱状图 插件,chartjs —— jquery柱状图插件

创建图表

要创建图表，我们需要实例化Chart该类。为此，我们需要传入我们想要绘制图表的画布的节点，jQuery实例或2d上下文。这是一个例子。

// Any of the following formats may be used

var ctx = document.getElementById("myChart");

var ctx = document.getElementById("myChart").getContext("2d");

var ctx = $("#myChart");

var ctx = "myChart";

获得元素或上下文后，您就可以实例化预定义的图表类型或创建自己的图表类型了！

以下示例实例化条形图，显示不同颜色的投票数和从0开始的y轴。

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '# of Votes',

data: [12, 19, 3, 5, 2, 3],

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

],

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

],

borderWidth: 1

}]

},

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

}

});