柱状图属于以长方形的长度为变量的统计图表[1]。chart.js创建图形的方式都类似,先是数据准备,然后在chart构造函数中指定图表类型。
如下列代码及效果图所示,chart类中将类型指定为bar,即可绘制柱状图,可以使用backgroundColor属性赋予一组数据统一的背景色,也可以用颜色数组方式赋予每个数据不同的背景色(详见参考文献2)。
const labels = numbers({count: 7});
const data = {
labels: labels,
datasets: [{
label: '柱状图',
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: 'rgb(75, 192, 192)',
backgroundColor:'rgb(255, 0,0)'
}]
};
var barChart = new Chart(ctx, {
type: 'bar',
data: data
});
如果包含多组数据集,则柱状图中会在每个数据对应位置显示相应数量的长柱。
在此需说明的是,可以设置每个数据集中的stack属性,个人理解算是每个数据集的分组,相同stack值的数据集中的每条数据会被累积绘制在同一长柱中,如下列代码及效果图所示:
datasets: [{
label: '柱状图1(group1)',
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: 'rgb(75, 192, 192)',
backgroundColor:'rgba(255, 99, 132, 0.5)',
stack:'group1'
},
{
label: '柱状图2(group1)',
data: [85, 79, 100, 101, 76, 75, 60],
borderColor: 'rgb(175, 92, 92)',
backgroundColor:'rgba(153, 102, 255, 0.5)',
stack:'group1'
},
{
label: '柱状图3(group2)',
data: [185, 179, 200, 201, 176, 175, 160],
borderColor: 'rgb(125, 42, 192)',
backgroundColor:'rgba(255, 205, 86, 0.5)',
stack:'group2'
}]
除此之外,柱状图绘制时一般都是竖直方向绘制,如果想绘制水平柱状图,可以在chart类的全局option中指定indexAxis属性值为y即可(之前版本中有种图类型为horizontalBar,指定为其即可绘制水平柱状图,但现在应该是不支持了)。
var barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
indexAxis: 'y'
}
});
参考文献:
[1]https://baike.baidu.com/item/%E6%9F%B1%E5%BD%A2%E5%9B%BE/10816534?fromtitle=%E6%9F%B1%E7%8A%B6%E5%9B%BE&fromid=10963683&fr=aladdin
[2]https://www.chartjs.org/docs/latest/charts/bar.html
[3]https://chartjs.bootcss.com/docs/charts/bar.html