如何基于宽表DataFrame实现Plotly Express面积图的逐帧动画效果

问题根源 #

你之前设置的动画失效，核心是对animation_frame参数的作用逻辑存在认知偏差：

该参数的本质是逐帧切换同维度下的分组数据，每个帧对应独立的一组绘图对象，而非控制x轴范围的逐步露出。如果直接把x轴的YearWeekISO字段作为animation_frame传入，每个帧组内仅会包含对应单周的3条数据点，根本无法形成连续的面积形状，自然无法得到从左到右逐步生长的动画效果。
你之前转成长表后的写法，因为没有给每个帧匹配对应的累积历史数据，每个帧组依然只有单条记录，所以输出结果和静态图没有差异。

正确实现步骤 #

1. 数据预处理 #

首先给原始数据增加连续的帧标识，保证帧的播放顺序和x轴从左到右的顺序完全一致：

# 若YearWeekISO当前是行索引，先重置为普通列
df = df.reset_index()
# 生成连续递增的帧序号
df["frame_seq"] = range(len(df))

2. 构造动画所需的累积数据集 #

动态面积图的播放逻辑是：播放到第N帧时，仅展示从最左侧起始时间到第N周的所有历史数据。因此需要为每一个帧生成对应的累积数据子集，不能直接用原始的宽/长表绘图：

import pandas as pd
import plotly.express as px

# 先将宽表转为绘图所需的长表结构
long_df = df.melt(
    id_vars=["YearWeekISO", "frame_seq"],
    value_vars=["ALL", "Age18_24", "Age25_49"],
    var_name="TargetGroup",
    value_name="value"
)

# 向量化生成所有帧的累积数据（比逐行循环效率高，大数据量下不易卡顿）
full_animation_df = (
    long_df[["frame_seq", "YearWeekISO", "TargetGroup", "value"]]
    # 交叉匹配所有帧序号
    .merge(
        long_df[["frame_seq"]].drop_duplicates().rename(columns={"frame_seq": "anim_frame"}),
        how="cross"
    )
    # 仅保留x位置早于等于当前帧序号的记录，实现逐帧向右露出的效果
    .query("frame_seq <= anim_frame")
)

3. 配置绘图参数 #

使用构造好的累积数据集绘制面积图，关键要固定坐标轴范围，避免播放过程中轴域来回跳动：

fig = px.area(
    full_animation_df,
    x="YearWeekISO",
    y="value",
    color="TargetGroup",
    animation_frame="anim_frame",
    # 固定x/y轴全范围
    range_x=[df["YearWeekISO"].min(), df["YearWeekISO"].max()],
    range_y=[0, df[["ALL", "Age18_24", "Age25_49"]].max().max() * 1.05],
)

# 调整动画播放速度（单位：毫秒/帧）
fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 300
fig.show()

常见踩坑说明 #

• 无需将YearWeekISO转为datetime格式：YYYY-Www格式的字符串本身具备字典序排序特性，作为x轴标签和帧序列完全可以正常排序，不会出现顺序错乱。
• 别试图直接给宽表加animation_frame参数就实现这个效果，宽表的绘图逻辑是一次性渲染所有列的所有行，没有办法拆分出逐帧的累积范围。
• 转长表是必要步骤，但如果没有为每个帧匹配对应的累积历史数据，哪怕用长表绘图，每个帧也只会包含单条记录，根本无法渲染出连续面积。

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