Bar——（柱状图/条形图）
柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。
官方文档：https://www.chartjs.org/docs/latest/charts/bar.html#barthickness
用法示例var myBarChart = new Chart(ctx, {type: ‘bar’,data: data,options: options});
图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）
属性 | 描述 | 类型 | 默认值 |
label | 图例和工具提示中显示的数据集标签，表现为横坐标。 | string | ‘’ |
backgroundColor | 条形背景颜色。 | Color | ‘rgba(0, 0, 0, 0.1)’ |
borderColor | 条形边框的颜色。 | Color | ‘rgba(0, 0, 0, 0.1)’ |
borderSkipped | 绘制条时要跳过的边缘。 | string | ‘bottom’ |
borderWidth | 条形边框的宽度（以像素为单位）。 | number/object | 0 |
hoverBackgroundColor | 悬停时的酒吧背景颜色。 | Color | undefined |
hoverBorderColor | 悬停时的条形边框颜色。 | Color | undefined |
hoverBorderWidth | 悬停时的条形边框宽度（以像素为单位）。 | number | 1 |
barPercentage | 每个条形图的可用宽度的百分比（0-1） | number | 0.9 |
categoryPercentage | 每个类别的可用宽度的百分比（0-1） | number | 0.9 |
barThickness | 手动设置每个条的宽度（以像素为单位）。 | number | |
maxBarThickness | 设置此项以确保条的大小不大于此值。 | number | |
minBarLength | 设置此项以确保条形的最小长度（以像素为单位）。 | number |
相关属性详解
borderSkipped 绘制条时要跳过的边缘。一段条并不是所有的边都存在边框的，borderSkipped 就是设置不存在边框的条边的位置。存在：‘bottom’，‘left’，‘top’，‘right’，false等值。注意：对于垂直图中的负条，top并且bottom已翻转。这同样适用于left和right水平的图表。
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [22,12,5,12,4,21],
borderSkipped:"bottom",//默认为底部
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: options
});
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [22,12,5,12,4,21],
borderSkipped:"top",//默认为底部
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: options
});
categoryPercentage 每个类别的可用宽度的百分比，范围为0-1，什么意思，每个类别可占最大宽度=图表宽度/类别个数，此时求值为每个类别可占最大宽度，也就是categoryPercentage =1的情况，其他数值，都以此为基数可求出当前类别所占宽度，可求出。默认categoryPercentage=0.8
barPercentage 每个条形图的可用宽度的百分比，范围为0-1，这是相对于当前类别所占宽度。即可求出当前条所占宽度。默认值barPercentage =0.9。
注意当categoryPercentage=1，barPercentage =1，此时条宽度与类别所占宽度均已达到最大。
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [22,12,5,12,4,21],
categoryPercentage:1,
barPercentage:1,
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: options
});
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [22,12,5,12,4,21],
categoryPercentage:0.8,//默认
barPercentage:0.9,//默认
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: options
});
barThickness 如果此值为数字，则将其应用于每个条的宽度（以像素为单位）。当这是强制执行，barPercentage并categoryPercentage会被忽略。
如果设置为’flex’，则将根据之前和之后的样本自动计算基本样本宽度，以使它们采用全部可用宽度而不会重叠。然后，使用barPercentage和调整尺寸categoryPercentage。百分比选项为1时没有间隙。当数据未均匀分布时，此模式会生成宽度不同的条。
如果未设置（默认值），则使用防止条形重叠的最小间隔来计算基本样本宽度，并使用barPercentage和设置条形大小categoryPercentage。此模式始终生成大小相等的条。
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [22,12,5,12,4,21],
categoryPercentage:1,
barPercentage:1,
barThickness:'30',
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: options
});
拓展
1-多数据集（多柱状图）
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [22,12,5,12,4,21],
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: '# of Votes',
data: [18,24,10,3,6,21],
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
},
]
},
options: options
});2-水平柱状图（horizontalBar）
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [22,12,5,12,4,21],
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: '# of Votes',
data: [18,24,10,3,6,21],
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
},
]
},
options: options
});3-水平多柱状图
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [22,12,5,12,4,21],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
},
]
},
options: options
});
4-堆叠图（对应位置数据依次累加）
let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [22,12,5,12,4,21],
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: '# of Votes',
data: [18,24,10,3,6,21],
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true,
}],
xAxes: [{
ticks: {
beginAtZero: true
},
stacked: true,
}]
}
}
});
