0
点赞
收藏
分享

微信扫一扫

Chart.js-柱状图分析（参数分析+例图）

juneyale 2023-01-16 阅读 123
Chart.js柱状图chart.js柱状图css取值编程语言


Chart.js-柱状图分析（参数分析+例图）

  • ​​柱状图样式总览​​
  • ​​基本写法​​
  • ​​参数解析​​
  • ​​条形图1 - 普通条形图​​
  • ​​条形图2 - 水平条形图​​
  • ​​条形图3 - 同比（放在一起比较）条形图​​
  • ​​条形图4 - 叠加条形图​​

柱状图样式总览

Chart.js-柱状图分析（参数分析+例图）_css

基本写法

首先在< script >标签里面引入chart.js：

<script src="chart.js/Chart.js"></script>

然后创建一个画布：

<canvas id="myChart" width="400" height="400"></canvas>

最后写js代码：

var ctx = $('#myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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: {
        title: {
                display: true,
                text: '条形图1 - 普通条形图'
            }
    }
});

画出的柱状图如下图：

Chart.js-柱状图分析（参数分析+例图）_柱状图_02

参数解析

【注意】以下都是写入在datasets中的参数：

参数名称

类型

默认值

说明

​​backgroundColor​​

​​Color​​

​​'rgba(0, 0, 0, 0.1)'​​

单条图形图背景颜色

​​borderColor​​

​​Color​​

​​'rgba(0, 0, 0, 0.1)'​​

单条边框的颜色

​​borderSkipped​​

​​string​​

​​'bottom'​​

隐藏边界，默认隐藏下方的边界。可选值有：​​'top'​​​、​​'bottom'​​​、​​'left'​​​、​​'right'​​​、​​false​​

​​borderWidth​

​​number|object​​

​​0​​

边界的宽度，默认为0。当想为四个边界设置不同值时，用​​borderWidth:{
'left':1,
'top':...
}​​

​​data​​

​​object[]​​

required

数据结构为数组，是柱状图对应的值。

​​hoverBackgroundColor​

​​Color​

​​undefined​​

类似于css的hover

​​hoverBorderColor​

​​Color​

​​undefined​​

类似于css的hover

​​hoverBorderWidth​

​​number​​

1

类似于css的hover

​​label​

​​string​​

​​''​​

标签，图例和工具提示中的数据集标签。

​​barPercentage​​

​​number​​

​​0.9​​

取值在0-1，bar的宽度占比

​​categoryPercentage​​

​​number​​

​​0.8​​

取值在0-1，标签的宽度占比。【注意】bar是在标签中，即标签是bar的容器。

​​barThickness​​

​​number|string​​

设置每个bar的宽度

​​maxBarThickness​​

​​number​​

bar的最大宽度

​​minBarLength​​

​​number​​

bar的最小高度

【注意】以下参数写在options中：

  • ​​title​​ 整个表的标题。
  • ​​scales–>stacked​​​ 控制多个表在X或Y方向上重叠。见图3，图4的代码。
    见代码：

options: {
        title: {
                display: true,
                text: '条形图4 - 叠加条形图'
            },
        scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
               }
    }

【注意】以下参数写在Chart()的第二个参数中：

  • ​​type​​​ 表的类型。图2的水平条形统计图，type值为​​"horizontalBar"​​

条形图1 - 普通条形图

var ctx1 = $('#myChart1');
var myChart = new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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: {
        title: {
                display: true,
                text: '条形图1 - 普通条形图'
            }
    }
});

条形图2 - 水平条形图

var ctx2 = $('#myChart2');
var myChart = new Chart(ctx2, {
    type: 'horizontalBar',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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: {
        title: {
                display: true,
                text: '条形图2 - 水平条形图'
            }
    }
});

条形图3 - 同比（放在一起比较）条形图

var ctx3 = $('#myChart3');
var myChart = new Chart(ctx3, {
    type: 'bar',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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, 
        },{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            type:'bar',
            backgroundColor:'rgba(0, 0, 0, 0.1)',
            borderColor:'rgba(255, 99, 132, 1)',
        }]
    },
    options: {
        title: {
                display: true,
                text: '条形图3 - 同比（放在一起比较）条形图'
            }
    }
});

条形图4 - 叠加条形图

var ctx4 = $('#myChart4');
var myChart = new Chart(ctx4, {
    type: 'bar',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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, 
        },{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            type:'bar',
            backgroundColor:'rgba(0, 0, 0, 0.1)',
            borderColor:'rgba(255, 99, 132, 1)',
        }]
    },
    options: {
        title: {
                display: true,
                text: '条形图4 - 叠加条形图'
            },
        scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
    }
});


举报

相关推荐

Chart.js-线形图分析（参数分析+例图）

Chart.js线形图Chart.js线形图可选值哈夫曼编码编程语言

Chart.js-饼状图分析（参数分析+例图）

Chart.js饼状图Chart.js饼状图参数解析数据结构编程语言

Frappe Chart ——柱状图

javascripthtml5css

柱状图组件深度分析

大数据数据库开发

29Echarts - 柱状图（柱状图动画延迟）

html类目i++

echarts—柱状图

echartsjavascriptvue.js

并列柱状图

python

Echarts柱状图

echarts前端

【数据分析之道-Matplotlib(五)】Matplotlib柱状图

matplotlibpython

【Python】pyecharts 模块 ⑥ ( 绘制柱状图 | pyecharts 绘制柱状图步骤 | 柱状图 x 轴 / y 轴 翻转 | 柱状图数据标签位置设置 )

python信息可视化开发语言pyechartsPyCharm代码人生
0 条评论