柱状图

柱状图标记在许多可视化中非常有用，包括柱状图、堆叠柱状图和时间线。

柱状图标记属性

点击显示代码

import altair as alt
import pandas as pd

corner_slider = alt.binding_range(min=0, max=50, step=1)
corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")

source = pd.DataFrame(
    {
        "a": ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
        "b": [28, 55, 43, 91, 81, 53, 19, 87, 52],
    }
)

alt.Chart(source).mark_bar(cornerRadius=corner_var).encode(
    x=alt.X("a:N").axis(labelAngle=0),
    y="b:Q",
).add_params(corner_var)

一个 bar 标记定义可以包含任何标准标记属性以及以下特殊属性

点击显示表格

属性	类型	描述
width	anyOf(number, ExprRef, RelativeBandSize)	标记的宽度。可以是以下之一： 表示固定像素宽度的数字。 相对带宽定义。例如，{band: 0.5} 表示带宽的一半。
height	anyOf(number, ExprRef, RelativeBandSize)	标记的高度。可以是以下之一： 表示固定像素高度的数字。 相对带宽定义。例如，{band: 0.5} 表示带宽的一半
orient	方向	非堆叠柱状图、刻度线图、面积图和折线图的方向。值可以是 horizontal（水平，默认）或 vertical（垂直）。 对于柱状图、规则线和刻度线，这决定了柱状图和刻度线的大小是应用于 x 维度还是 y 维度。 对于面积图，此属性决定了 Vega 输出的 orient 属性。 对于折线图和轨迹图标记，如果未指定 config.sortLineBy，则此属性决定了折线中点的排序顺序。对于堆叠图表，这总是由堆叠的方向决定；因此，显式指定的值将被忽略。
align	anyOf(Align, ExprRef)	文本或范围标记（面积图、柱状图、图片、矩形、规则线）的水平对齐方式。可以是 "left"（左对齐）、"right"（右对齐）、"center"（居中）之一。 注意：范围标记不支持表达式引用。
baseline	anyOf(TextBaseline, ExprRef)	对于文本标记，垂直文本基线。可以是 "alphabetic"（字母基线，默认）、"top"（顶部）、"middle"（中间）、"bottom"（底部）、"line-top"（行顶）、"line-bottom"（行底）之一，或提供有效值之一的表达式引用。"line-top" 和 "line-bottom" 的操作方式与 "top" 和 "bottom" 类似，但它们是相对于 lineHeight 计算的，而不是仅相对于 fontSize。 对于范围标记，标记的垂直对齐方式。可以是 "top"（顶部）、"middle"（中间）、"bottom"（底部）之一。 注意：范围标记不支持表达式引用。
binSpacing	number	分箱字段的柱状图之间的偏移量。理想值是 0（统计学家偏爱）或 1（Vega-Lite 默认值，D3 示例风格）。 默认值： 1
cornerRadius	anyOf(number, ExprRef)	圆角矩形或弧形角的像素半径。 默认值： 0
cornerRadiusEnd	anyOf(number, ExprRef)	对于垂直柱状图，左上角和右上角圆角半径。 对于水平柱状图，右上角和右下角圆角半径。
cornerRadiusTopLeft	anyOf(number, ExprRef)	圆角矩形右上角的像素半径。 默认值： 0
cornerRadiusTopRight	anyOf(number, ExprRef)	圆角矩形左上角的像素半径。 默认值： 0
cornerRadiusBottomRight	anyOf(number, ExprRef)	圆角矩形右下角的像素半径。 默认值： 0
cornerRadiusBottomLeft	anyOf(number, ExprRef)	圆角矩形左下角的像素半径。 默认值： 0

示例

单柱状图

将定量字段映射到 bar 标记的 x 或 y 可以生成单柱状图。

import altair as alt
from altair import datum
from vega_datasets import data

source = data.population.url

alt.Chart(source).mark_bar().encode(
    alt.X("sum(people):Q").title("Population")
).transform_filter(
    datum.year == 2000
)

柱状图

如果我们将另一个离散字段映射到 y 通道，我们可以生成水平柱状图。指定 alt.Step(20) 将调整每个离散步骤的柱状图高度。

import altair as alt
from altair import datum
from vega_datasets import data

source = data.population.url

alt.Chart(source).mark_bar().encode(
    alt.X("sum(people):Q").title("Population"),
    alt.Y("age:O"),
).transform_filter(
    datum.year == 2000
).properties(height=alt.Step(20))

带有时间轴的柱状图

虽然 bar 标记通常使用 x 和 y 通道来编码一对离散字段和连续字段，但它也可以用于两个通道都是连续字段的情况。例如，给定一个 x 轴为时间字段的柱状图，我们可以看到 x 标度是连续标度。默认情况下，连续标度上的柱状图大小将根据 continuousBandSize 配置设置。

import altair as alt
from vega_datasets import data

source = data.seattle_weather()

alt.Chart(source).mark_bar().encode(
    alt.X("month(date):T").title("Date"),
    alt.Y("mean(precipitation):Q"),
)

直方图

如果数据未预聚合（即数据字段中的每条记录代表一个项目），将分箱后的定量字段映射到 x 并将聚合的 count 映射到 y 将生成直方图。

import altair as alt
from vega_datasets import data

source = data.movies.url

alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q").bin(),
    y='count()',
)

堆叠柱状图

通过添加颜色到柱状图（使用 color 属性），默认会创建堆叠柱状图。这里我们还自定义了颜色的标度范围，使颜色更好看。（有关自定义堆叠的更多详细信息，请参见 stack。）

import altair as alt
from vega_datasets import data

source = data.barley()

alt.Chart(source).mark_bar().encode(
    x="variety",
    y="sum(yield)",
    color="site"
)

带偏移量的分组柱状图

import altair as alt
import pandas as pd

source = pd.DataFrame(
    {
        "category": ["A", "A", "B", "B", "C", "C"],
        "group": ["x", "y", "z", "x", "y", "z"],
        "value": [0.1, 0.6, 0.9, 0.7, 0.2, 0.6],
    }
)

alt.Chart(source).mark_bar().encode(
    x=alt.X("category:N"),
    xOffset="group:N",
    y=alt.Y("value:Q"),
    color=alt.Color("group:N"),
)