柱状/条形图(Bar)

柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。

示例用法

1. var myBarChart = new Chart(ctx, {
2. type: "bar",
3. data: data,
4. options: options
5. });

数据集属性

柱状/条形图允许为每个数据集指定一些属性用于显示特定数据集。一些属性可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个节点，第二个值应用于第二个节点，依此类推。

borderSkipped

此设置用于避免基线被填充。一般来说，除非创建从柱状/条形图派生的图表类型，否则不需要更改。

选项:

• 'bottom'
• 'left'
• 'top'
• 'right'

配置选项

柱状/条形图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并，形成最终传递给图表的选项。

offsetGridLines

如果为 true，则特定数据点的条形落在网格线之间。如果为 false，网格线将直接位于网格中间。在实际项目中这是不太可能需要改变的。一般通过不同的配置来重复使用。

此设置适用于条形图的轴配置。需要为每个新添加到图表中的轴设置此设置。

1. options = {
2. scales: {
3. xAxes: [
4. {
5. gridLines: {
6. offsetGridLines: true
7. }
8. }
9. ]
10. }
11. };

默认选项

通常要将配置设置应用于所有创建的条形图。全局条形图设置存储在Chart.defaults.bar中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

barPercentage vs categoryPercentage

以下显示了百分比选项与类别百分比选项之间的关系。

1. // categoryPercentage: 1.0
2. // barPercentage: 1.0
3. Bar:        | 1.0 | 1.0 |
4. Category:   |    1.0    |
5. Sample:     |===========|

7. // categoryPercentage: 1.0
8. // barPercentage: 0.5
9. Bar:          |.5|  |.5|
10. Category:  |      1.0     |
11. Sample:    |==============|

13. // categoryPercentage: 0.5
14. // barPercentage: 1.0
15. Bar:            |1.||1.|
16. Category:       |  .5  |
17. Sample:     |==============|

数据结构

条形图数据集的data属性被指定为一个数字数组。数据数组中的每个点对应于 x 轴上相同索引处的标签。

1. data: [20, 10];

堆积条形图

条形图可以通过改变 X 轴和 Y 轴上的设置来启用堆叠，将其配置为堆叠条形图。堆积的条形图可以用来显示一个数据系列是如何由许多小块构成的。

1. var stackedBar = new Chart(ctx, {
2. type: "bar",
3. data: data,
4. options: {
5. scales: {
6. xAxes: [
7. {
8. stacked: true
9. }
10. ],
11. yAxes: [
12. {
13. stacked: true
14. }
15. ]
16. }
17. }
18. });

数据集属性

以下数据集属性特定于堆叠条形图。

水平条形图

水平条形图是垂直条形图上的变体。它有时用来显示趋势数据，并排比较多个数据集。

示例

1. var myBarChart = new Chart(ctx, {
2. type: "horizontalBar",
3. data: data,
4. options: options
5. });

配置选项

水平条形图的配置选项与条形图(bar)相同。但是，任何在条形图中 x 轴上指定的选项都将应用于水平条形图中的 y 轴。

默认的水平栏配置选项在Chart.defaults.horizo​​ntalBar中设置。