区域

area 标记将多个数据元素表示为一个单独的区域形状。区域标记通常用于显示随时间的变化，可以使用单个区域或堆叠区域。

区域标记属性

点击显示代码

import altair as alt
import pandas as pd

interpolate_select = alt.binding_select(
    options=[
        "basis",
        "cardinal",
        "catmull-rom",
        "linear",
        "monotone",
        "natural",
        "step",
        "step-after",
        "step-before",
    ],
    name="interpolate",
)
interpolate_var = alt.param(bind=interpolate_select, value="linear")

tension_slider = alt.binding_range(min=0, max=1, step=0.05, name="tension")
tension_var = alt.param(bind=tension_slider, value=0)

source = pd.DataFrame({"u": [1, 2, 3, 4, 5, 6], "v": [28, 55, 42, 34, 36, 38]})

alt.Chart(source).mark_area(interpolate=interpolate_var, tension=tension_var).encode(
    x="u", y="v"
).add_params(interpolate_var, tension_var)

一个 area 标记定义可以包含任何标准标记属性以及以下线条插值、线条和点叠加属性

点击显示表格

属性	类型	描述
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"。 注意：范围标记不支持表达式引用。
orient	方向	非堆叠条形图、刻度线图、区域图和折线图的方向。可选值包括 horizontal（水平，默认）或 vertical（垂直）。 对于条形、规则线和刻度线，这决定了条形和刻度线的大小应应用于 x 维度还是 y 维度。 对于区域，此属性决定了 Vega 输出的 orient 属性。 对于折线和轨迹标记，如果未指定 config.sortLineBy，此属性决定了折线中点的排序顺序。对于堆叠图表，这总是由堆叠的方向决定；因此，明确指定的值将被忽略。
interpolate	anyOf(Interpolate, ExprRef)	用于折线和区域标记的线条插值方法。可选值如下： "linear": 分段线性段，如折线。 "linear-closed": 闭合线性段形成多边形。 "step": 在水平和垂直段之间交替，如阶梯函数。 "step-before": 在垂直和水平段之间交替，如阶梯函数。 "step-after": 在水平和垂直段之间交替，如阶梯函数。 "basis": B 样条曲线，末端复制控制点。 "basis-open": 开放 B 样条曲线；可能不与起点或终点相交。 "basis-closed": 闭合 B 样条曲线，如循环。 "cardinal": Cardinal 样条曲线，末端复制控制点。 "cardinal-open": 开放 Cardinal 样条曲线；可能不与起点或终点相交，但会与其他控制点相交。 "cardinal-closed": 闭合 Cardinal 样条曲线，如循环。 "bundle": 等同于 basis，但使用 tension 参数拉直样条曲线。 "monotone": 三次插值，保持 y 的单调性。
tension	anyOf(number, ExprRef)	根据插值类型，设置 tension 参数（适用于折线和区域标记）。
line	anyOf(boolean, OverlayMarkDef)	一个标志，用于在区域标记上方叠加线条，或一个定义叠加线条属性的对象。 如果此值为空对象 ({}) 或 true，则使用默认属性的线条。 如果此值为 false，则不会自动向区域标记添加线条。 默认值： false。
point	anyOf(boolean, OverlayMarkDef, string)	一个标志，用于在折线或区域标记上方叠加点，或一个定义叠加点属性的对象。 如果此属性为 "transparent"，则使用透明点（用于增强工具提示和选择）。 如果此属性为空对象 ({}) 或 true，则使用具有默认属性的填充点。 如果此属性为 false，则不会自动向折线或区域标记添加点。 默认值： false。

示例

区域图

使用 area 标记，并搭配一个时间或有序字段（通常在 x 轴）和一个定量字段（通常在 y 轴），可以生成一个区域图。例如，下面的区域图显示了美国随时间变化的失业人数。

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    x="yearmonth(date):T",
    y="sum(count):Q",
).properties(width=300, height=200)

叠加线条和点标记的区域图

通过将标记定义的 line 和 point 属性设置为 true 或一个定义叠加点标记属性的对象，我们可以将线条和点标记叠加在区域上方。

import altair as alt
from vega_datasets import data

source = data.stocks.url

alt.Chart(source).mark_area(line=True, point=True).encode(
    x="date:T",
    y="price:Q",
).transform_filter(
    alt.datum.symbol == "GOOG"
)

除了使用单一颜色作为区域的填充色外，我们还可以将其设置为渐变色。在此示例中，我们还自定义了叠加层。有关渐变选项的更多信息，请参见 Vega-Lite 渐变文档。

import altair as alt
from vega_datasets import data

source = data.stocks()

alt.Chart(source).transform_filter(alt.datum.symbol == "GOOG").mark_area(
    line={"color": "darkgreen"},
    color=alt.Gradient(
        gradient="linear",
        stops=[
            alt.GradientStop(color="white", offset=0),
            alt.GradientStop(color="darkgreen", offset=1),
        ],
        x1=1,
        x2=1,
        y1=1,
        y2=0,
    ),
).encode(
    alt.X("date:T"),
    alt.Y("price:Q"),
)

堆叠区域图

默认情况下，向区域图添加颜色字段会创建堆叠区域图。例如，在这里我们按行业分割区域图。

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q"),
    alt.Color("series:N").scale(scheme="category20b"),
)

规范化堆叠区域图

您还可以通过在编码通道中将 stack 设置为 "normalize" 来创建规范化堆叠区域图。在这里，我们可以轻松地看到各行业的失业率百分比。

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q").stack("normalize"),
    alt.Color("series:N").scale(scheme="category20b"),
)

流图

我们还可以通过在编码通道中将 stack 设置为 "center"，将堆叠区域图的基线移动到中心，生成流图。添加 interactive 方法可以对 x 轴比例尺进行缩放和平移。

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q").stack("center").axis(None),
    alt.Color("series:N").scale(scheme="category20b"),
).interactive()

范围区域

为区域标记的定量轴指定 X2 或 Y2 会产生范围区域。例如，我们可以使用范围区域来突出显示按 monthdate 聚合的随时间变化的最低和最高测量温度。

import altair as alt
from vega_datasets import data

source = data.seattle_weather()

alt.Chart(source).mark_area(opacity=0.7).encode(
    alt.X("monthdate(date):T").title("Date"),
    alt.Y("mean(temp_max):Q").title("Daily Temperature Range (C)"),
    alt.Y2("mean(temp_min):Q"),
).properties(width=600, height=300)