Dash多页应用中dcc.Interval的extendData仅切换Chrome标签时更新图表

核心原因：当前活跃标签页下，浏览器或React的渲染优化机制抑制了Plotly图表的实时重绘，而切换标签时触发的页面重绘事件会一次性处理积压的更新数据。结合多页应用的组件挂载逻辑，还可能涉及页面切换时图表组件的状态初始化问题。

以下是几个直接可行的解决办法：

1. 强制触发图表重绘 #

在extendData回调中额外添加一个无意义的输出（比如一个隐藏div的内容），迫使React触发组件更新链，连带刷新Plotly图表：

# 修改实时图表回调，新增一个隐藏输出
@app.callback(
    [Output('live-graph', 'extendData'),
     Output('dummy-trigger', 'children')],  # 新增的隐藏触发项
    Input('interval-component', 'n_intervals'),
    State('live-graph', 'figure')
)
def update_graph(n, fig):
    new_x = [np.datetime64('now')]
    new_y = [np.random.randn()]
    # 返回extendData和一个随时间变化的字符串（强制触发更新）
    return (
        dict(x=[new_x], y=[new_y], type='scatter'),
        str(datetime.now().timestamp())
    )

# 在图表页面添加这个隐藏div
def render_page_content(pathname):
    if pathname == '/graph':
        return html.Div([
            dcc.Graph(id='live-graph'),
            html.Div(id='dummy-trigger', style={'display': 'none'})
        ])
    # ...其他页面逻辑

2. 控制Interval仅在当前页面运行 #

多页应用中，Interval默认全局运行，可能导致页面切换时更新数据发送给已卸载的组件，回到图表页后积压的更新无法正确渲染。给Interval加一个页面路由控制的禁用逻辑：

@app.callback(Output('interval-component', 'disabled'),
              Input('url', 'pathname'))
def toggle_interval(pathname):
    # 只有在图表页面时才启用Interval
    return pathname != '/graph'

3. 给图表添加初始figure并禁用渲染优化 #

确保图表页面挂载时就有初始的空图表，同时给图表组件添加CSS属性提示浏览器不要优化渲染：

import plotly.graph_objects as go

def render_page_content(pathname):
    if pathname == '/graph':
        # 初始化空图表
        initial_fig = go.Figure(data=[go.Scatter(x=[], y=[], mode='lines')])
        return html.Div([
            dcc.Graph(
                id='live-graph',
                figure=initial_fig,
                style={'will-change': 'transform'}  # 禁用浏览器渲染优化
            )
        ])
    # ...其他页面逻辑

4. 直接更新figure而非仅用extendData #

如果以上方法都不行，可以放弃extendData，改用直接更新整个figure（虽然性能稍差，但更稳定）：

@app.callback(
    Output('live-graph', 'figure'),
    Input('interval-component', 'n_intervals'),
    State('live-graph', 'figure')
)
def update_graph(n, fig):
    new_x = np.datetime64('now')
    new_y = np.random.randn()
    # 追加数据到现有figure
    fig['data'][0]['x'].append(new_x)
    fig['data'][0]['y'].append(new_y)
    # 限制数据点数量，避免性能问题
    fig['data'][0]['x'] = fig['data'][0]['x'][-100:]
    fig['data'][0]['y'] = fig['data'][0]['y'][-100:]
    return fig

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