Dash 快速入门教程

——基于 Python 的交互式 Web 应用开发

1. Dash 简介

Dash 是由 Plotly 开发的 Python 框架，用于快速构建数据可视化 Web 应用。它结合了：

• 前端：React.js（交互式 UI）
• 后端：Flask（Python Web 服务器）
• 可视化：Plotly（动态图表）

适用场景：数据仪表盘、科学计算可视化、机器学习结果展示等。

2. 安装 Dash

pip install dash plotly networkx pandas  # 核心库 + 可选依赖

3. 基础组件

Dash 应用由三部分组成：

1. 布局（Layout）：定义页面的外观（HTML + 交互组件）。
2. 回调（Callbacks）：实现交互逻辑（Python 函数）。
3. 数据（Data）：通过 Pandas/NumPy 等处理数据。

(1) 基础布局示例

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div([
    html.H1("Hello Dash!"),                     # 标题
    dcc.Dropdown(options=['A', 'B'], value='A'), # 下拉菜单
    dcc.Graph(figure={})                        # 图表占位
])

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

关键组件：

• html.*：HTML 标签（如 Div, H1, P）。
• dcc.*：交互组件（如 Dropdown, Slider, Graph）。

4. 交互式回调

核心机制：Input → 回调函数 → Output。

(1) 下拉菜单 + 图表更新

from dash import Input, Output
import plotly.express as px
import pandas as pd

df = px.data.iris()  # 示例数据

@app.callback(
    Output('graph', 'figure'),
    Input('dropdown', 'value')
)
def update_graph(selected_value):
    filtered_df = df[df['species'] == selected_value]
    fig = px.scatter(filtered_df, x='sepal_width', y='sepal_length')
    return fig

(2) 输入框 + 表格更新

@app.callback(
    Output('table', 'data'),
    Input('input', 'value')
)
def update_table(input_value):
    df['Price'] = [input_value, input_value-1, input_value-2]  # 模拟计算
    return df.to_dict('records')  # 表格数据格式

5. 高级应用示例

(1) 网络图可视化（NetworkX + Plotly）

import networkx as nx

G = nx.Graph([(1,2), (2,3)])  # 创建图
pos = nx.spring_layout(G)      # 计算布局

# 转换为Plotly图形
edge_trace = go.Scatter(x=[...], y=[...], mode='lines')
node_trace = go.Scatter(x=[...], y=[...], mode='markers')

fig = go.Figure(data=[edge_trace, node_trace])
app.layout = html.Div([dcc.Graph(figure=fig)])

(2) 多输入多输出回调

@app.callback(
    [Output('output1', 'children'), Output('output2', 'figure')],
    [Input('input1', 'value'), Input('input2', 'value')]
)
def multi_update(input1, input2):
    return f"Text: {input1}", px.line(data, x=input2)

6. 部署 Dash 应用

** 本地运行**

python app.py  # 默认访问 http://127.0.0.1:8050

8. 学习资源

• 官方文档：Dash User Guide
• 示例库：Dash Gallery
• 社区：Stack Overflow 的 dash 标签。

总结