Plotly Express动画折线图仅显示首日数据问题求助

问题原因 #

你当前的代码使用animation_frame="day"时，Plotly会按日期拆分数据，每个动画帧仅加载对应单日的分钟线数据，导致：

1. 每个帧仅显示当天的零散数据点，无法形成连贯的长期折线；
2. 离散指标indicator仅在每分钟0分的行有值，其余为NaN，进一步导致折线断裂；
3. 滑块默认停在第一帧，视觉上呈现“仅显示首日数据”的效果。

解决方案 #

要实现滑动滑块累积展示从起始日到当前选中日期的所有数据，推荐使用plotly.graph_objects手动控制动画帧，确保每个帧包含截至该日期的全部历史数据，以下是优化后的代码：

!pip install yfinance
import yfinance as yf
import plotly.graph_objects as go
import pandas as pd

# 下载5天分钟线数据，保留Close列
df = yf.download("AAPL", period="5d", interval="1M")[['Close']]
df['day'] = df.index.strftime('%d/%m/%Y')
# 生成离散指标：每天0分的Close值，其余为NaN
df.loc[df.index.minute == 0, "indicator"] = df['Close']

# 获取所有唯一日期并按时间排序
unique_days = sorted(df['day'].unique())

# 构建动画帧列表：每个帧包含截至当前日期的累积数据
frames = []
for day in unique_days:
    cumulative_df = df[df['day'] <= day]
    frame = go.Frame(
        data=[
            go.Scatter(x=cumulative_df.index, y=cumulative_df['Close'], name='Close', connectgaps=True),
            go.Scatter(x=cumulative_df.index, y=cumulative_df['indicator'], name='Indicator', connectgaps=True)
        ],
        name=day
    )
    frames.append(frame)

# 创建初始图表（显示首日数据）
initial_df = df[df['day'] == unique_days[0]]
fig = go.Figure(
    data=[
        go.Scatter(x=initial_df.index, y=initial_df['Close'], name='Close', connectgaps=True),
        go.Scatter(x=initial_df.index, y=initial_df['indicator'], name='Indicator', connectgaps=True)
    ],
    frames=frames,
    layout=go.Layout(
        title='AAPL Price & Discrete Indicator (Cumulative)',
        yaxis_title='Price',
        xaxis_title='Time',
        # 添加播放/暂停按钮
        updatemenus=[{
            'type': 'buttons',
            'buttons': [{
                'label': 'Play',
                'method': 'animate',
                'args': [None, {'frame': {'duration': 500, 'redraw': True}, 'fromcurrent': True}]
            }, {
                'label': 'Pause',
                'method': 'animate',
                'args': [[None], {'frame': {'duration': 0, 'redraw': True}, 'mode': 'immediate'}]
            }]
        }],
        # 配置日期滑块
        sliders=[{
            'steps': [{
                'method': 'animate',
                'args': [[day], {'frame': {'duration': 0, 'redraw': True}, 'mode': 'immediate'}],
                'label': day
            } for day in unique_days],
            'active': 0,
            'currentvalue': {'prefix': 'Date: '}
        }]
    )
)

# 固定x轴范围，避免帧切换时x轴跳动
fig.update_xaxes(range=[df.index.min(), df.index.max()])
fig.show()

关键优化点 #

• 手动构建累积数据帧，确保每个滑块位置展示从起始日到当前日期的完整历史；
• 添加播放/暂停按钮，优化交互体验；
• 固定x轴范围，避免切换帧时的视觉跳动；
• 保留connectgaps=True，确保离散指标的非NaN点正常连接。

替代方案（Plotly Express实现） #

如果坚持使用Plotly Express，可通过复制历史数据到后续帧的方式实现累积效果（适合小数据集）：

!pip install yfinance
import yfinance as yf
import plotly.express as px
import pandas as pd

df = yf.download("AAPL", period="5d", interval="1M")[['Close']]
df['day'] = df.index.strftime('%d/%m/%Y')
df.loc[df.index.minute == 0, "indicator"] = df['Close']

# 生成累积数据集：每个日期对应截至该日的所有行
cumulative_dfs = []
unique_days = sorted(df['day'].unique())
for i, day in enumerate(unique_days):
    temp_df = df[df['day'] <= day].copy()
    temp_df['animation_day'] = unique_days[i]
    cumulative_dfs.append(temp_df)

cumulative_df = pd.concat(cumulative_dfs)

fig = px.line(cumulative_df, x=cumulative_df.index, y=["Close","indicator"], animation_frame="animation_day")
fig.update_traces(connectgaps=True)
fig.update_xaxes(range=[df.index.min(), df.index.max()])
fig.show()

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