chart.js使用学习——柱状图（1：基本用法)

柱状图属于以长方形的长度为变量的统计图表[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

chart.js使用学习——柱状图（1：基本用法)

猜你喜欢