如何在Dash中配置运行时刷新间隔或添加手动启停刷新按钮

需求描述 #

现有Dash代码实现了固定间隔自动刷新图表，需新增以下功能：

• 支持运行时手动配置刷新间隔时间
• 添加按钮实现手动启动/暂停刷新功能

修改后的完整代码 #

import dash
import pandas as pd
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
from dash import html, dcc

app = dash.Dash(__name__)
port = 8050

def _create_fig():
    df = pd.read_csv('25nov.csv')
    df.columns=['Sl.no','OffsetRow']
    fig = go.Figure(data=go.Scatter(x=df['Sl.no'], y=df['OffsetRow']))
    return fig

app.layout = html.Div([
    # 图表展示区域
    dcc.Graph(
        id='live-graph',
        animate=True,
        figure=_create_fig()
    ),
    # 控制组件区域
    html.Div([
        html.Label("刷新间隔（秒）："),
        dcc.Input(
            id='interval-input',
            type='number',
            value=20,
            min=1,
            step=1
        ),
        html.Button(
            id='toggle-refresh-btn',
            children='暂停刷新',
            style={'margin-left': '10px'}
        )
    ], style={'margin': '10px 0'}),
    # 核心刷新控制组件
    dcc.Interval(
        id='graph-update',
        interval=20*1000,
        n_intervals=0,
        disabled=False
    )
])

# 回调：控制刷新间隔与启停状态
@app.callback(
    [Output('graph-update', 'interval'),
     Output('graph-update', 'disabled'),
     Output('toggle-refresh-btn', 'children')],
    [Input('toggle-refresh-btn', 'n_clicks'),
     Input('interval-input', 'value')],
    [State('graph-update', 'disabled')]
)
def control_refresh(n_clicks, interval_sec, is_disabled):
    # 按钮点击切换启停状态
    if n_clicks is not None and n_clicks % 2 == 1:
        return interval_sec * 1000, True, '启动刷新'
    else:
        return interval_sec * 1000, False, '暂停刷新'

# 回调：刷新图表数据
@app.callback(
    Output('live-graph', 'figure'),
    Input('graph-update', 'n_intervals')
)
def refresh_data(n_intervals):
    return _create_fig()

if __name__ == "__main__":
    app.run_server(debug=True, port=port)

关键改动说明 #

• 新增控制组件：添加数字输入框用于设置刷新间隔（单位秒），添加按钮控制刷新启停
• 扩展Interval组件：新增disabled属性，通过该属性控制是否触发刷新回调
• 多输出回调逻辑：一个回调同时处理按钮的启停切换、输入框的间隔更新，同步修改按钮显示文本
• 修复原代码问题：补全_create_fig函数中go.Figure的闭合括号，修正语法错误

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