矩形

rect 标记表示一个任意的矩形。

矩形标记属性

点击显示代码

import altair as alt

x_slider = alt.binding_range(min=1, max=100, step=1, name="x")
x_var = alt.param(bind=x_slider, value=25)

x2_slider = alt.binding_range(min=1, max=100, step=1, name="x2")
x2_var = alt.param(bind=x2_slider, value=75)

y_slider = alt.binding_range(min=1, max=100, step=1, name="y")
y_var = alt.param(bind=y_slider, value=25)

y2_slider = alt.binding_range(min=1, max=100, step=1, name="y2")
y2_var = alt.param(bind=y2_slider, value=75)

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

alt.Chart().mark_rect(cornerRadius=cornerRadius_var, color="orange").encode(
    x=alt.XDatum(x_var, type="quantitative", scale=alt.Scale(domain=[0, 100])),
    x2=alt.X2Datum(x2_var),
    y=alt.XDatum(y_var, type="quantitative", scale=alt.Scale(domain=[0, 100])),
    y2=alt.X2Datum(y2_var),
).add_params(x_var, x2_var, y_var, y2_var, cornerRadius_var)

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

点击显示表格

属性	类型	描述
width	anyOf(number, ExprRef, RelativeBandSize)	标记的宽度。可以是以下之一： 表示固定像素宽度的数字。 相对带宽定义。例如，{band: 0.5} 表示带宽的一半。
height	anyOf(number, ExprRef, RelativeBandSize)	标记的高度。可以是以下之一： 表示固定像素高度的数字。 相对带宽定义。例如，{band: 0.5} 表示带宽的一半。
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" 之一。 注意：范围标记不支持表达式引用。
cornerRadius	anyOf(number, ExprRef)	圆角矩形或弧形的像素半径。 默认值： 0

示例

热力图

在 x 和 y 通道上使用离散字段结合 rect 标记可以创建热力图。

import altair as alt
from vega_datasets import data

source = data.seattle_weather()

alt.Chart(source).mark_rect().encode(
    alt.X("date(date):O").axis(labelAngle=0, format="%e").title("Day"),
    alt.Y("month(date):O").title("Month"),
    alt.Color("max(temp_max):Q").title("Max Temp"),
)

范围矩形

同时指定 x 和 x2 以及/或 y 和 y2 可以创建跨越某些 x 和/或 y 值的矩形。

例如，我们可以使用 rect 创建一个注释 layer，在全局 min 和 max 值之间提供阴影。

import altair as alt
from vega_datasets import data

source = data.cars()

point = alt.Chart(source).mark_point().encode(
    x="Horsepower:Q",
    y="Miles_per_Gallon:Q",
)

rect = alt.Chart(source).mark_rect().encode(
    y="max(Miles_per_Gallon)",
    y2="min(Miles_per_Gallon)",
    opacity=alt.value(0.2),
)

point + rect