Chart.js 中文网

# 柱状图

¥Bar Chart

柱状图提供了一种显示以垂直条表示的数据值的方法。它有时用于显示趋势数据，以及多个数据集的并排比较。

¥A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

# 数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

  • data.datasets[index] - 仅此数据集的选项

    ¥data.datasets[index] - options for this dataset only

  • options.datasets.bar - 所有条形数据集的选项

    ¥options.datasets.bar - options for all bar datasets

  • options.elements.bar - 所有 柱状元素 的选项

    ¥options.elements.bar - options for all bar elements

  • options - 整个图表的选项

    ¥options - options for the whole chart

柱状图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。比如柱状图的颜色一般都是这样设置的。只需要在数据集命名空间中指定 data 选项。

¥The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the color of the bars is generally set this way. Only the data option needs to be specified in the dataset namespace.

名称 类型 可编写脚本 可转位 默认
backgroundColor Color 是的 是的 'rgba(0, 0, 0, 0.1)'
base number 是的 是的
barPercentage number * * 0.9
barThickness number|string * *
borderColor Color 是的 是的 'rgba(0, 0, 0, 0.1)'
borderSkipped string|boolean 是的 是的 'start'
borderWidth number|object 是的 是的 0
borderRadius number|object 是的 是的 0
categoryPercentage number * * 0.8
clip number|object|false * *
data object|object[]| number[]|string[] * * required
grouped boolean * * true
hoverBackgroundColor Color 是的 是的
hoverBorderColor Color 是的 是的
hoverBorderWidth number 是的 是的 1
hoverBorderRadius number 是的 是的 0
indexAxis string * * 'x'
inflateAmount number|'auto' 是的 是的 'auto'
maxBarThickness number * *
minBarLength number * *
label string * * ''
order number * * 0
pointStyle pointStyle 是的 * 'circle'
skipNull boolean * *
stack string * * 'bar'
xAxisID string * * 第一个 x 轴
yAxisID string * * 第一个 y 轴

所有这些值，如果 undefined，回退到 选项决议 中描述的范围

¥All these values, if undefined, fallback to the scopes described in option resolution

# 示例数据集配置

¥Example dataset configuration

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

# 一般的

¥General

名称 描述
base 沿值轴以数据单位表示的条形基值。如果未设置，则默认为值轴基值。
clip 如何相对于 chartArea 进行裁剪。正值允许溢出，负值会限制 chartArea 内的许多像素。0 = 在图表区域剪辑。裁剪也可以每边配置：clip: {left: 5, top: false, right: -2, bottom: 0}
grouped 条形是否应该在索引轴上分组。当 true 时，所有具有相同索引值的数据集将以该索引值为中心并排放置。当 false 时，每个柱都放置在其实际索引轴值上。
indexAxis 数据集的基轴。'x' 用于垂直条，'y' 用于水平条。
label 出现在图例和工具提示中的数据集标签。
order 数据集的绘制顺序。还会影响堆叠、工具提示和图例的顺序。more
skipNull 如果为 true，则在确定钢筋大小时，不会将空值或未定义值用于间距计算。
stack 此数据集所属组的 ID（堆叠时，每个组将是一个单独的堆栈）。more
xAxisID 绘制此数据集的 x 轴的 ID。
yAxisID 用于绘制此数据集的 y 轴的 ID。

# 样式

¥Styling

可以使用以下属性控制每个栏的样式：

¥The style of each bar can be controlled with the following properties:

名称 描述
backgroundColor 栏背景颜色。
borderColor 条形边框颜色。
borderSkipped 绘制条时要跳过的边缘。
borderWidth 条形边框宽度（以像素为单位）。
borderRadius 条形边框半径（以像素为单位）。
minBarLength 设置此项以确保条形具有最小像素长度。
pointStyle 图例点的样式。更多...

所有这些值，如果为 undefined，则回退到关联的 elements.bar.* 选项。

¥All these values, if undefined, fallback to the associated elements.bar.* options.

# borderSkipped

此设置用于避免在填充底部绘制条形描边，或禁用边框半径。通常，这不需要更改，除非创建从柱状图派生的图表类型。

¥This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart.

注意

对于垂直图表中的负条，top 和 bottom 会翻转。水平图表中的 left 和 right 也是如此。

¥For negative bars in a vertical chart, top and bottom are flipped. Same goes for left and right in a horizontal chart.

选项是：

¥Options are:

  • 'start'

  • 'end'

  • 'middle'（仅对堆叠条形有效：跳过条形之间的边界）

    ¥'middle' (only valid on stacked bars: the borders between bars are skipped)

  • 'bottom'

  • 'left'

  • 'top'

  • 'right'

  • false（不要跳过任何边界）

    ¥false (don't skip any borders)

  • true（跳过所有边界）

    ¥true (skip all borders)

# borderWidth

如果这个值是一个数字，它将应用于矩形的所有边（左、上、右、下），borderSkipped 除外。如果此值为对象，则 left 属性定义左边框宽度。同样，也可以指定 right、top 和 bottom 属性。省略的边界和 borderSkipped 被跳过。

¥If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except borderSkipped. If this value is an object, the left property defines the left border width. Similarly, the right, top, and bottom properties can also be specified. Omitted borders and borderSkipped are skipped.

# borderRadius

如果这个值是一个数字，它将应用于矩形的所有角（topLeft、topRight、bottomLeft、bottomRight），除了与 borderSkipped 接触的角。如果此值为对象，则 topLeft 属性定义左上角边框半径。同样，也可以指定 topRight、bottomLeft 和 bottomRight 属性。省略的角和接触 borderSkipped 的角将被跳过。例如，如果 top 边界被跳过，角 topLeft 和 topRight 的边界半径也将被跳过。

¥If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight), except corners touching the borderSkipped. If this value is an object, the topLeft property defines the top-left corners border radius. Similarly, the topRight, bottomLeft, and bottomRight properties can also be specified. Omitted corners and those touching the borderSkipped are skipped. For example if the top border is skipped, the border radius for the corners topLeft and topRight will be skipped as well.

堆积图表

当边框半径以数字形式提供并且图表堆叠时，半径将仅应用于位于堆栈边缘或浮动条的条形。对象语法可用于覆盖此行为。

¥When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.

# inflateAmount

此选项可用于膨胀用于绘制条形的矩形。当 barPercentage * categoryPercentage 为 1 时，这可用于隐藏条形之间的伪影。大多数情况下，默认值 'auto' 应该有效。

¥This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when barPercentage * categoryPercentage is 1. The default value 'auto' should work in most cases.

# 交互

¥Interactions

可以使用以下属性控制与每个栏的交互：

¥The interaction with each bar can be controlled with the following properties:

名称 描述
hoverBackgroundColor 悬停时的条形背景颜色。
hoverBorderColor 悬停时的条形边框颜色。
hoverBorderWidth 悬停时的条形边框宽度（以像素为单位）。
hoverBorderRadius 悬停时的条形边框半径（以像素为单位）。

所有这些值，如果为 undefined，则回退到关联的 elements.bar.* 选项。

¥All these values, if undefined, fallback to the associated elements.bar.* options.

# barPercentage

每个栏的可用宽度百分比 (0-1) 应在类别宽度内。1.0 将采用整个类别的宽度并将条形彼此紧挨着放置。更多...

¥Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. more...

# categoryPercentage

每个类别可用宽度的百分比 (0-1) 应在样本宽度内。更多...

¥Percent (0-1) of the available width each category should be within the sample width. more...

# barThickness

如果这个值是一个数字，它将应用于每个条的宽度，以像素为单位。强制执行时，barPercentage 和 categoryPercentage 将被忽略。

¥If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, barPercentage and categoryPercentage are ignored.

如果设置为 'flex'，则会根据之前和之后的样本自动计算基本样本宽度，以便它们采用完整的可用宽度而不会重叠。然后，使用 barPercentage 和 categoryPercentage 调整条形的大小。百分比选项为 1 时没有间隙。当数据间隔不均匀时，此模式会生成不同宽度的条。

¥If set to 'flex', the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using barPercentage and categoryPercentage. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.

如果未设置（默认），则使用防止条重叠的最小间隔计算基本样本宽度，并使用 barPercentage 和 categoryPercentage 调整条的大小。此模式始终生成大小相等的条。

¥If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using barPercentage and categoryPercentage. This mode always generates bars equally sized.

# maxBarThickness

设置此项以确保条形尺寸不会比这更粗。

¥Set this to ensure that bars are not sized thicker than this.

# 标尺配置

¥Scale Configuration

柱状图从关联的 scale 选项中为以下配置设置唯一的默认值：

¥The bar chart sets unique default values for the following configuration from the associated scale options:

名称 类型 默认 描述
offset boolean true 如果为 true，则会向两个边缘添加额外的空间，并且轴会缩放以适合图表区域。
grid.offset boolean true 如果为真，则特定数据点的条形位于网格线之间。网格线将向左移动刻度间隔的一半。如果为 false，网格线将直接沿着条形中间向下移动。更多...

# 比例配置示例

¥Example scale configuration

options = {
    scales: {
        x: {
            grid: {
              offset: true
            }
        }
    }
};

# 偏移网格线

¥Offset Grid Lines

如果为真，则特定数据点的条形位于网格线之间。网格线将向左移动刻度间隔的一半，即网格线之间的空间。如果为 false，网格线将直接沿着条形中间向下移动。默认情况下，对于柱状图中的类别比例设置为 true，而对于其他比例或图表类型设置为 false。

¥If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.

# 默认选项

¥Default Options

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

¥It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in Chart.overrides.bar. Changing the global options only affects charts created after the change. Existing charts are not changed.

# barPercentage 与 categoryPercentage

¥barPercentage vs categoryPercentage

下面显示了栏百分比选项和类别百分比选项之间的关系。

¥The following shows the relationship between the bar percentage option and the category percentage option.

// 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:     |==================|

# 数据结构

¥Data Structure

所有支持的 数据结构 都可以与柱状图一起使用。

¥All the supported data structures can be used with bar charts.

# 堆叠柱状图

¥Stacked Bar Chart

通过更改 X 和 Y 轴上的设置以启用堆叠，可以将柱状图配置为堆叠柱状图。堆叠柱状图可用于显示一个数据系列如何由许多较小的部分组成。

¥Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

const stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

# 水平柱状图

¥Horizontal Bar Chart

水平柱状图是垂直柱状图的变体。它有时用于显示趋势数据，以及多个数据集的并排比较。为此，你必须将选项对象中的 indexAxis 属性设置为 'y'。此属性的默认值为 'x'，因此将显示垂直条。

¥A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. To achieve this, you will have to set the indexAxis property in the options object to 'y'. The default for this property is 'x' and thus will show vertical bars.

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
  }
};

# 水平柱状图配置选项

¥Horizontal Bar Chart config Options

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

¥The configuration options for the horizontal bar chart are the same as for the bar chart. However, any options specified on the x-axis in a bar chart, are applied to the y-axis in a horizontal bar chart.

# 内部数据格式

¥Internal data format

{x, y, _custom}，其中 _custom 是定义堆积柱状图属性的可选对象：{start, end, barStart, barEnd, min, max}。start 和 end 是输入值。这两个在 barStart（更接近原点）、barEnd（更远离原点）、min 和 max 中重复。

¥{x, y, _custom} where _custom is an optional object defining stacked bar properties: {start, end, barStart, barEnd, min, max}. start and end are the input values. Those two are repeated in barStart (closer to origin), barEnd (further from origin), min and max.