# 条形图
条形图提供了一种方法来显示用垂直条表示的数据值。它有时用于显示趋势数据以及并排比较多个数据集。
# 数据集属性
命名空间
data.datasets[index]- 仅此数据集的选项options.datasets.bar- 所有条形数据集的选项options.elements.bar- 所有 条形元素 的选项options- 整个图表的选项
条形图允许为每个数据集指定许多属性。这些用于为特定数据集设置显示属性。例如，条形颜色通常以这种方式设置。在数据集命名空间中，只需要指定 data 选项。
| 名称 | 类型 | 可脚本化 | 可索引 | 默认值 |
|---|---|---|---|---|
backgroundColor | 颜色 | 是 | 是 | 'rgba(0, 0, 0, 0.1)' |
base | 数字 | 是 | 是 | |
barPercentage | 数字 | - | - | 0.9 |
barThickness | number|string | - | - | |
borderColor | 颜色 | 是 | 是 | 'rgba(0, 0, 0, 0.1)' |
borderSkipped | string|boolean | 是 | 是 | 'start' |
borderWidth | number|object | 是 | 是 | 0 |
borderRadius | number|object | 是 | 是 | 0 |
categoryPercentage | 数字 | - | - | 0.8 |
clip | number|object|false | - | - | |
data | object|object[]| number[]|string[] | - | - | 必需 |
grouped | 布尔值 | - | - | true |
hoverBackgroundColor | 颜色 | 是 | 是 | |
hoverBorderColor | 颜色 | 是 | 是 | |
hoverBorderWidth | 数字 | 是 | 是 | 1 |
hoverBorderRadius | 数字 | 是 | 是 | 0 |
indexAxis | 字符串 | - | - | 'x' |
inflateAmount | number|'auto' | 是 | 是 | 'auto' |
maxBarThickness | 数字 | - | - | |
minBarLength | 数字 | - | - | |
label | 字符串 | - | - | '' |
order | 数字 | - | - | 0 |
pointStyle | pointStyle | 是 | - | 'circle' |
skipNull | 布尔值 | - | - | |
stack | 字符串 | - | - | 'bar' |
xAxisID | 字符串 | - | - | 第一个 x 轴 |
yAxisID | 字符串 | - | - | 第一个 y 轴 |
如果这些值是 undefined，则回退到 选项解析 中描述的范围。
# 数据集配置示例
data: {
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
};
# 常规
| 名称 | 描述 |
|---|---|
base | 数据单元中沿着值轴的条形基值。如果未设置，则默认为值轴基值。 |
clip | 相对于 chartArea 的裁剪方式。正值允许溢出，负值在 chartArea 内裁剪那么多像素。0 = 在 chartArea 处裁剪。也可以对每边配置裁剪：clip: {left: 5, top: false, right: -2, bottom: 0} |
grouped | 条形是否应在索引轴上分组。如果为 true，则所有具有相同索引值的 dataset 将彼此相邻放置，并以该索引值为中心。如果为 false，则每个条形将放置在其实际的索引轴值上。 |
indexAxis | 数据集的基轴。垂直条为 'x'，水平条为 'y'。 |
label | 出现在图例和工具提示中的数据集的标签。 |
order | 数据集的绘制顺序。也影响堆叠、工具提示和图例的顺序。 更多 |
skipNull | 如果为 true，则 null 或 undefined 值在确定条形大小时的间距计算中将不被使用。 |
stack | 此数据集所属组的 ID（如果堆叠，则每个组将是一个单独的堆叠）。 更多 |
xAxisID | 在其中绘制此数据集的 x 轴的 ID。 |
yAxisID | 在其中绘制此数据集的 y 轴的 ID。 |
# 样式
可以使用以下属性控制每个条形的样式
| 名称 | 描述 |
|---|---|
backgroundColor | 条形背景颜色。 |
borderColor | 条形边框颜色。 |
borderSkipped | 绘制条形时要跳过的边缘。 |
borderWidth | 条形边框宽度（以像素为单位）。 |
borderRadius | 条形边框圆角（以像素为单位）。 |
minBarLength | 设置为确保条形具有最小长度（以像素为单位）。 |
pointStyle | 图例点的样式。 更多... |
如果这些值是 undefined，则回退到关联的 elements.bar.* 选项。
# borderSkipped
此设置用于避免在填充的底部绘制条形描边，或禁用边框圆角。通常，除非创建从条形图派生的图表类型，否则不需要更改此设置。
注意
对于垂直图表中的负条，top 和 bottom 被翻转。水平图表中的 left 和 right 也是如此。
选项为
'start''end''middle'（仅对堆叠条有效：条形之间的边框将被跳过）'bottom''left''top''right'false（不要跳过任何边框）true（跳过所有边框）
# borderWidth
如果此值为数字，则将其应用于矩形的四边（左、上、右、下），除了 borderSkipped。如果此值为对象，则 left 属性定义左边框宽度。类似地，也可以指定 right、top 和 bottom 属性。省略的边框和 borderSkipped 将被跳过。
# borderRadius
如果此值为数字，则将其应用于矩形的四个角（左上角、右上角、左下角、右下角），除了与 borderSkipped 相邻的角。如果此值为对象，则 topLeft 属性定义左上角的边框圆角。类似地，也可以指定 topRight、bottomLeft 和 bottomRight 属性。省略的角和与 borderSkipped 相邻的角将被跳过。例如，如果 top 边框被跳过，则角 topLeft 和 topRight 的边框圆角也将被跳过。
堆叠图表
当边框圆角作为数字提供并且图表是堆叠时，圆角将仅应用于堆叠边缘的条形或条形漂浮的条形。可以使用对象语法来覆盖此行为。
# inflateAmount
此选项可用于膨胀用于绘制条形的矩形。当 barPercentage * categoryPercentage 为 1 时，这可以用来隐藏条形之间的伪影。默认值 'auto' 应该在大多数情况下都能正常工作。
# 交互
可以使用以下属性控制与每个条形的交互
| 名称 | 描述 |
|---|---|
hoverBackgroundColor | 悬停时条形背景颜色。 |
hoverBorderColor | 悬停时条形边框颜色。 |
hoverBorderWidth | 悬停时条形边框宽度（以像素为单位）。 |
hoverBorderRadius | 悬停时条形边框圆角（以像素为单位）。 |
如果这些值是 undefined，则回退到关联的 elements.bar.* 选项。
# barPercentage
每个条形在类别宽度内应占用的可用宽度的百分比（0-1）。1.0 将占用整个类别宽度并将条形彼此紧挨着放置。 更多...
# categoryPercentage
每个类别在样本宽度内应占用的可用宽度的百分比（0-1）。 更多...
# barThickness
如果此值为数字，则将其应用于每个条形的宽度，以像素为单位。强制执行此值时，将忽略 barPercentage 和 categoryPercentage。
如果设置为 'flex'，则将根据前一个和后一个样本自动计算基本样本宽度，以便它们占用所有可用宽度而不会重叠。然后，使用 barPercentage 和 categoryPercentage 对条形进行大小调整。当百分比选项为 1 时，没有间隙。此模式在数据不均匀分布时会生成不同宽度的条形。
如果未设置（默认），则使用最小的间隔来计算基本样本宽度，以防止条形重叠，并使用 barPercentage 和 categoryPercentage 对条形进行大小调整。此模式始终生成大小相等的条形。
# maxBarThickness
设置为确保条形的大小不超过此值。
# 坐标轴配置
条形图从关联的 scale 选项设置以下配置的唯一默认值
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
offset | 布尔值 | true | 如果为 true，则在两端添加额外的空间，并且坐标轴按比例缩放以适合图表区域。 |
grid.offset | 布尔值 | true | 如果为 true，则特定数据点的条形位于网格线之间。网格线将向左移动刻度间隔的一半。如果为 false，则网格线将直接穿过条形的中间。 更多... |
# 坐标轴配置示例
options = {
scales: {
x: {
grid: {
offset: true
}
}
}
};
# 偏移网格线
如果为真，则特定数据点的条形图将落在网格线之间。网格线将向左移动半个刻度间隔，即网格线之间的间距。如果为假，则网格线将沿着条形图的中间向下延伸。默认情况下，对于条形图中的类别比例尺，此值为真，而对于其他比例尺或图表类型，此值为假。
# 默认选项
通常，您希望将配置设置应用于所有创建的条形图。全局条形图设置存储在 Chart.overrides.bar 中。更改全局选项仅影响更改后创建的图表。现有图表不会改变。
# barPercentage 与 categoryPercentage
以下显示了条形百分比选项和类别百分比选项之间的关系。
// categoryPercentage: 1.0
// barPercentage: 1.0
Bar: | 1.0 | 1.0 |
Category: | 1.0 |
Sample: |===========|
// categoryPercentage: 1.0
// barPercentage: 0.5
Bar: |.5| |.5|
Category: | 1.0 |
Sample: |==============|
// categoryPercentage: 0.5
// barPercentage: 1.0
Bar: |1.0||1.0|
Category: | .5 |
Sample: |==================|
# 数据结构
所有受支持的 数据结构 都可以用于条形图。
# 堆叠条形图
通过更改 X 轴和 Y 轴上的设置以启用堆叠，可以将条形图配置为堆叠条形图。堆叠条形图可用于显示一个数据系列是如何由多个较小的部分组成的。
const stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
# 水平条形图
水平条形图是垂直条形图的一种变体。它有时用于显示趋势数据，以及并排比较多个数据集。要实现这一点，您需要将选项对象中的 indexAxis 属性设置为 'y'。此属性的默认值为 'x'，因此将显示垂直条形图。
# 水平条形图配置选项
水平条形图的配置选项与 条形图 的配置选项相同。但是，在条形图中指定在 x 轴上的任何选项都将应用于水平条形图中的 y 轴。
# 内部数据格式
{x, y, _custom}，其中 _custom 是一个可选对象，用于定义堆叠条形属性：{start, end, barStart, barEnd, min, max}。start 和 end 是输入值。这两个值在 barStart（更靠近原点）、barEnd（更远离原点）、min 和 max 中重复。