如何在同一标签页更新Plotly px.line生成的BTC价格折线图

问题原因 #

每次调用fig.show()都会启动一个新的临时HTTP服务，并在浏览器中打开新标签页加载该服务的内容，因此循环中重复创建fig并调用show()会不断生成新标签。

解决方案：使用Plotly Dash实现同一标签页更新（推荐） #

Dash是Plotly官方的交互式应用框架，专门用于构建动态更新的数据可视化页面，能在同一浏览器标签内实时刷新图表内容，完全匹配你的幻灯片式展示需求。

完整代码 #

import pandas as pd
import dash
from dash import dcc, html
from dash.dependencies import Input, Output

# 读取BTC价格数据
df = pd.read_csv('btc.csv')

# 初始化Dash应用
app = dash.Dash(__name__)

# 定义应用布局：包含折线图和定时器组件
app.layout = html.Div([
    dcc.Graph(id='btc-price-chart'),
    dcc.Interval(
        id='update-timer',
        interval=250,  # 0.25秒更新一次（与原代码时间间隔一致）
        n_intervals=0
    )
])

# 回调函数：根据定时器触发更新图表数据
@app.callback(
    Output('btc-price-chart', 'figure'),
    Input('update-timer', 'n_intervals')
)
def refresh_btc_chart(n):
    # 计算当前展示的数据区间（每次取60条，和原逻辑保持一致）
    current_start = n * 60
    if current_start >= 600:
        current_start = 540  # 避免超出数据范围，最后一次展示540-600区间
    
    part_df = df.iloc[current_start:current_start+60]
    
    # 生成折线图并返回
    fig = px.line(
        part_df,
        x='date_x',
        y='price_y',
        title=f'BTC Price (Interval {current_start//60 + 1})'
    )
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

替代方案：复用已有Figure对象（仅适用于交互式环境） #

如果不想引入Dash，可以直接更新已有fig的数据和布局，但这种方式仅在Jupyter Notebook等支持实时渲染的交互式环境中有效，普通Python脚本无法自动刷新浏览器页面：

代码示例 #

import pandas as pd
import plotly.express as px
import time

df = pd.read_csv('btc.csv')

# 初始化初始图表
i = 0
part_df = df.iloc[i:i+60]
fig = px.line(part_df, x='date_x', y='price_y', title='BTC Price ..')
fig.show()

while i < 600:
    time.sleep(0.25)
    i += 60
    part_df = df.iloc[i:i+60]
    
    # 直接更新图表的数据源和标题
    fig.data[0].x = part_df['date_x']
    fig.data[0].y = part_df['price_y']
    fig.layout.title.text = f'BTC Price .. (Interval {i//60 + 1})'

注意：此方案在普通本地脚本运行时，浏览器页面不会自动同步更新，仅在Jupyter等交互式环境中能实时刷新图表。

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