合并含共同animation_frame的Plotly动画图表时帧缺失问题求助

当合并两个基于不同DataFrame创建、带有共同Temp(deg)动画帧的Plotly折线图时，直接合并data会导致动画帧丢失，仅显示静态数据。原代码如下：

fig1 = px.line(df_cur_funct, x="sup(V)", y="Chip_Cur(uAmp)",#1st dataframe
            color="Device_ID", animation_frame="Temp(deg)"
           
          )
fig2 = px.line(df_cur_funct_mode1, x="sup(V)", y="Chip_Cur(uAmp)",#2nd dataframe
            color="Device_ID", animation_frame="Temp(deg)"
           
          )

fig3 = go.Figure(data=fig1.data + fig2.data) #combining fig1 and fig2
fig3.show()

测试数据 #

• 数据集df_cur_funct：

Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40         1.6       159.801
NOISE_020   0x81        -30         1.8       162.197
NOISE_020   0x81        -20         2.0       164.386
NOISE_020   0x81        -10         2.5       173.200
NOISE_020   0x81         00         2.7       175.219

• 数据集df_cur_funct_mode1：

Device_ID   Die_Version Temp(deg)   sup(V)  Chip_Cur(uAmp)
NOISE_020   0x81        -40          2.5    173.200
NOISE_020   0x81        -30          2.7    175.219
NOISE_020   0x81        -20          3.6    184.786
NOISE_021   0x81        -10          2.5    172.552
NOISE_021   0x81         00          2.7    174.454

问题原因 #

直接合并fig1.data + fig2.data仅整合了图表的静态数据系列，没有同步合并两个图表的frames（动画帧数据）和layout中的动画控制组件（如滑块、播放按钮），导致动画功能失效。

解决方案 #

方法1：合并DataFrame后统一绘图（推荐）

将两个数据集合并，新增一列标记数据来源，直接用Plotly Express绘制，自动生成统一的动画帧，操作更简洁：

import pandas as pd
import plotly.express as px

# 给两个数据集添加标识列，区分来源
df_cur_funct['Dataset'] = 'Original'
df_cur_funct_mode1['Dataset'] = 'Mode1'
# 合并数据集
combined_df = pd.concat([df_cur_funct, df_cur_funct_mode1], ignore_index=True)

# 绘制带共同动画帧的折线图，可通过线型区分不同数据集
fig = px.line(combined_df, 
              x="sup(V)", 
              y="Chip_Cur(uAmp)",
              color="Device_ID",
              line_dash="Dataset",
              animation_frame="Temp(deg)",
              title="Chip Current vs Supply Voltage (Animated by Temperature)")
fig.show()

方法2：手动合并动画帧与布局配置

如果需要保留两个独立图表的原始配置，可手动合并frames和layout中的动画控制部分：

import plotly.graph_objects as go
import plotly.express as px

# 生成原始两个带动画的图表
fig1 = px.line(df_cur_funct, x="sup(V)", y="Chip_Cur(uAmp)",
            color="Device_ID", animation_frame="Temp(deg)")
fig2 = px.line(df_cur_funct_mode1, x="sup(V)", y="Chip_Cur(uAmp)",
            color="Device_ID", animation_frame="Temp(deg)")

# 合并所有动画帧：按温度名称匹配，合并对应帧的数据
merged_frames = []
# 获取所有唯一的温度帧名称并排序
temp_list = sorted(set([frame.name for frame in fig1.frames] + [frame.name for frame in fig2.frames]))

for temp in temp_list:
    # 提取对应温度的帧数据
    frame1_data = next((f.data for f in fig1.frames if f.name == temp), [])
    frame2_data = next((f.data for f in fig2.frames if f.name == temp), [])
    # 合并当前温度帧的所有数据
    merged_frames.append(go.Frame(data=frame1_data + frame2_data, name=temp))

# 创建合并后的图表，复用其中一个图表的布局（包含动画控制组件）
fig3 = go.Figure(
    data=fig1.data + fig2.data,
    frames=merged_frames,
    layout=fig1.layout
)

# 调整标题（可选）
fig3.update_layout(title="Combined Animated Line Charts")
fig3.show()

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