如何在Altair分面图表中添加高亮区域（类似axhspan/axvspan）

问题背景 #

在Altair绘制汽车数据分面散点图时，尝试添加黄色高亮区域遇到两个报错：

• 直接对分面图表添加图层：ValueError: Faceted charts cannot be layered
• 先创建图层再分面：Facet charts require data to be specified at the top level

解决方案 #

核心思路是让高亮图层的数据源与主图表的分面、维度字段对齐，同时满足分面对顶层数据的要求：

1. 高亮区域使用mark_rect实现（而非mark_rule），确保能铺满每个分面子图的x轴范围；
2. 基于主数据的分面字段（Origin）和x轴字段（Brand）构建高亮数据，保证每个分面都能渲染对应区域；
3. 分面操作在顶层Chart执行，同时指定主数据源，满足分面对数据的要求。

修正后的完整代码 #

import altair as alt
import numpy as np
from vega_datasets import data

source = data.cars()

# 数据预处理
brand = [i.split(' ')[0] for i in source['Name']]
source['Brand'] = brand

weight = list(set(source['Weight_in_lbs']))
weightArray = np.array_split(weight, 2)
weightClassification = []
for weight_in_lbs in source['Weight_in_lbs']:
    if weight_in_lbs in weightArray[0]:
        weightClassification.append('light')
    if weight_in_lbs in weightArray[1]:
        weightClassification.append('heavy')
source['weight_classification'] = weightClassification

source = source.dropna(subset=['Horsepower', 'Brand', 'Origin', 'weight_classification'])

# 定义颜色和形状映射
colors = {"light": "orange", "heavy": "steelblue"}
shapes = {"light": "circle", "heavy": "square"}

# 主散点图
point_chart = alt.Chart(source).mark_point().encode(
    x=alt.X("Brand:N", title=None, axis=alt.Axis(labelAngle=-90), scale=alt.Scale(padding=1)),
    y=alt.Y("Horsepower:Q", axis=alt.Axis(title='Horsepower', titleFontSize=17)),
    color=alt.Color("weight_classification:N", scale=alt.Scale(domain=list(colors.keys()), range=list(colors.values()))),
    shape=alt.Shape("weight_classification:N", scale=alt.Scale(domain=list(shapes.keys()), range=list(shapes.values()))),
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'],
).properties(
    width=alt.Step(25),
    height=350
).interactive()

# 构建高亮区域数据：匹配主数据的Origin和Brand维度
highlight_data = source[['Origin', 'Brand']].drop_duplicates()
highlight_data['y1'] = 100
highlight_data['y2'] = 140

# 高亮图层（用mark_rect实现区域高亮）
yellow_band = alt.Chart(highlight_data).mark_rect(
    color='yellow',
    opacity=0.3
).encode(
    x=alt.X("Brand:N", title=None),
    y=alt.Y('y1:Q'),
    y2='y2:Q'
)

# 组合图层并分面：顶层指定主数据源，满足分面要求
final_chart = alt.Chart(source).facet(
    facet=alt.Facet('Origin:N', title=None, header=alt.Header(labelFontSize=13), type="ordinal"),
    spec=(point_chart + yellow_band)
).configure_view(
    strokeOpacity=0
).resolve_scale(
    x='independent'
).configure_facet(
    spacing=20
).configure_axis(
    labelFontSize=17,
    labelLimit=500,
    labelAngle=-90
).configure_legend(labelLimit=0, labelFontSize=13, titleFontSize=15)

final_chart.save('AltairCar_with_highlight.html')

关键修改说明 #

• 高亮数据构建：提取主数据中唯一的Origin和Brand组合，添加固定的y1/y2值，确保每个分面的每个Brand位置都有对应的高亮区域数据；
• 高亮图层类型：使用mark_rect替代mark_rule，实现横向铺满的区域高亮效果；
• 分面方式：通过alt.Chart(source).facet(spec=图层组合)的方式，让顶层Chart持有主数据源，满足分面对数据的要求，同时将组合好的图层作为每个分面的内容。

内容的提问来源于stack exchange，提问作者Rodrigo