如何通过浏览器URL路径为Dash Plotly看板的仪表盘动态赋值

核心逻辑是将原本静态写死的仪表盘数值，改为从URL路径提取参数动态生成，兼容根路径默认值显示，改动点如下：

改动后的完整可运行代码 #

import flask
import dash
import dash_html_components as html
import plotly.graph_objects as go
import dash_core_components as dcc
# 新增Dash回调依赖导入
from dash.dependencies import Input, Output

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
# 关闭回调异常拦截，避免未匹配路径时报错
app.config.suppress_callback_exceptions = True

# 抽离仪表盘生成逻辑，接收动态数值参数
def generate_gauge_fig(value):
    return go.Figure(go.Indicator(
        mode = "gauge+number",
        value = value,
        domain = {'x': [0, 1], 'y': [0, 1]},
        title = {'text': "Speed"}
    ))

app.layout = html.Div([
    # 新增URL监听组件，自动同步当前浏览器地址
    dcc.Location(id='url', refresh=False),
    dcc.Graph(
        id='speed-gauge',
        # 初始加载显示默认值270
        figure=generate_gauge_fig(270)
    )
])

# 新增回调：监听URL变化，动态更新仪表盘数值
@app.callback(
    Output('speed-gauge', 'figure'),
    Input('url', 'pathname')
)
def update_gauge(pathname):
    # 提取路径中除斜杠外的内容
    path_content = pathname.strip('/')
    # 根路径访问时返回默认值
    if not path_content:
        return generate_gauge_fig(270)
    # 尝试转换为数值，转换失败则 fallback 到默认值
    try:
        target_value = float(path_content)
        return generate_gauge_fig(target_value)
    except ValueError:
        return generate_gauge_fig(270)

# 保留原有测试路由，补全返回值避免Flask报错
@server.route('/test', methods=['POST'])
def req():
    print('Request triggered!')  # 控制台打印调试信息
    return "Test request received"

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

核心改动说明 #

• 不再在全局直接生成写死value=270的fig，抽离为通用生成函数，支持传入任意数值
• 新增dcc.Location组件，不需要额外编写Flask路由就能获取当前浏览器的完整URL路径
• 新增路径监听回调，自动解析URL中的数值：
  • 访问根路径http://127.0.0.1:8050/时，默认显示270
  • 访问http://127.0.0.1:8050/198时，自动提取路径中的198作为仪表盘数值
  • 支持浮点数数值，比如访问/256.7会正常显示256.7
  • 路径为非数字时自动回退到默认值，避免程序崩溃
• 补全了原有/test路由的返回值，否则Flask处理POST请求时会因缺少响应内容报错

验证方式 #

启动服务后直接在浏览器输入对应URL即可查看效果，不需要手动刷新页面，路径变化时仪表盘会自动更新。

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