如何在Altair中实现折线图下方区域按季节（跨月）着色？

你的代码存在两个核心问题：

• 直接基于原始离散数据绘制区域，导致季节区域无法连续覆盖对应月份区间
• 冬季跨11-12月和1-2月，离散数据无法自动处理这种非连续的季节区间

以下是修正后的实现步骤和完整代码：

步骤说明 #

1. 先聚合月度事件数量，得到连续的计数数据用于绘制折线图
2. 定义包含季节对应月份范围的数据集，专门处理冬季的非连续区间
3. 采用分层图表：底层用矩形填充季节背景色，上层绘制折线图，保留点击交互功能

import numpy as np
import pandas as pd
import altair as alt

# 原始数据
data_2 = [
    {"Month": 1, "Season": "Winter", "Year": "2005", "Severity": "Low"},
    {"Month": 1, "Season": "Winter", "Year": "2005", "Severity": "High"},
    {"Month": 2, "Season": "Winter", "Year": "2005", "Severity": "Medium"},
    {"Month": 3, "Season": "Spring", "Year": "2005", "Severity": "Low"},
    {"Month": 3, "Season": "Spring", "Year": "2005", "Severity": "Low"},
    {"Month": 4, "Season": "Spring", "Year": "2005", "Severity": "High"},
    {"Month": 5, "Season": "Spring", "Year": "2005", "Severity": "Medium"},
    {"Month": 6, "Season": "Summer", "Year": "2005", "Severity": "Medium"},
    {"Month": 6, "Season": "Summer", "Year": "2005", "Severity": "High"},
    {"Month": 7, "Season": "Summer", "Year": "2005", "Severity": "Low"},
    {"Month": 8, "Season": "Summer", "Year": "2005", "Severity": "Medium"},
    {"Month": 9, "Season": "Fall", "Year": "2005", "Severity": "High"},
    {"Month": 10, "Season": "Fall", "Year": "2005", "Severity": "Low"},
    {"Month": 10, "Season": "Fall", "Year": "2005", "Severity": "Low"},
    {"Month": 11, "Season": "Fall", "Year": "2005", "Severity": "Medium"},
    {"Month": 12, "Season": "Winter", "Year": "2005", "Severity": "High"},
    {"Month": 12, "Season": "Winter", "Year": "2005", "Severity": "High"},
]
df = pd.DataFrame(data_2)

# 季节颜色映射
season_colors = alt.Scale(
    domain=["Spring", "Fall", "Winter", "Summer"],
    range=["#ffff4d", "#ffa31a", "#66b3ff", "#99e600"],
)

# 点击选择交互
highlight = alt.selection_point(
    fields=["Season"], on="click", name="Highlight"
)

# 聚合月度事件数量
df_agg = df.groupby('Month').size().reset_index(name='Count')

# 定义季节对应的月份区间（处理冬季非连续情况）
season_ranges = pd.DataFrame([
    {"Season": "Winter", "start": 1, "end": 2},
    {"Season": "Spring", "start": 3, "end": 5},
    {"Season": "Summer", "start": 6, "end": 8},
    {"Season": "Fall", "start": 9, "end": 10},
    {"Season": "Winter", "start": 11, "end": 12}
])

# 绘制季节背景层
season_background = alt.Chart(season_ranges).mark_rect(opacity=0.3).encode(
    x='start:Q',
    x2='end:Q',
    y=alt.value(0),  # 从Y轴底部开始填充
    y2=alt.value(df_agg['Count'].max()),  # 填充到Y轴最大值
    color=alt.condition(
        highlight,
        alt.Color('Season:N', scale=season_colors),
        alt.value('lightgray')
    )
).add_params(highlight)

# 绘制折线图层
line_chart = alt.Chart(df_agg).mark_line(point=True, interpolate='linear').encode(
    x=alt.X('Month:Q', title='Month'),
    y=alt.Y('Count:Q', title='Event Count'),
    color=alt.value('black')
)

# 合并两层图表
final_chart = season_background + line_chart
final_chart

关键改进说明 #

• 用矩形背景层替代直接绘制区域，确保季节颜色完整覆盖对应月份区间，包括冬季的非连续部分
• 聚合月度数据保证折线图的连续性和准确性
• 交互逻辑保留点击季节高亮对应区域的功能，未选中区域显示浅灰色背景

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