Dash 教程

以下是 Dash（Python 的 Web 可视化框架）的完整入门教程。我们将从零开始，逐步构建一个交互式仪表盘应用。所有代码均可在本地运行（推荐使用 VS Code + Python 环境）。

---

1. 环境准备

# 1. 创建虚拟环境（可选但推荐）
python -m venv dash-env
source dash-env/bin/activate  # Windows: dash-env\Scripts\activate

# 2. 安装 Dash
pip install dash pandas plotly

Dash 依赖 Plotly（交互图表）和 Flask（后端服务器）。

---

2. 第一个 Dash 应用：Hello World

创建文件 app.py：

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

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

# 简单数据
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2]
})

# 使用 Plotly Express 创建图表
fig = px.bar(df, x="Fruit", y="Amount", title="水果数量")

# 布局（Layout）
app.layout = html.Div(children=[
    html.H1(children='我的第一个 Dash 应用'),
    html.Div(children='Dash: A web application framework for Python.'),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

# 运行服务器
if __name__ == '__main__':
    app.run_server(debug=True)

运行：

python app.py

打开浏览器访问：http://127.0.0.1:8050/

---

3. 核心组件介绍

组件	说明	示例
html.*	HTML 标签	html.H1, html.Div, html.Button
dcc.*	Dash Core Components（交互控件）	dcc.Dropdown, dcc.Slider, dcc.Graph
callback	响应用户输入	@app.callback

---

4. 交互式应用：下拉菜单过滤图表

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

app = Dash(__name__)

# 模拟数据
df = px.data.gapminder().query("year == 2007")

app.layout = html.Div([
    html.H1("全球 GDP vs 预期寿命"),

    html.Label("选择洲："),
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': c, 'value': c} for c in df['continent'].unique()],
        value='Asia'  # 默认值
    ),

    dcc.Graph(id='graph')
])

# 回调：根据下拉菜单更新图表
@app.callback(
    Output('graph', 'figure'),
    Input('continent-dropdown', 'value')
)
def update_graph(selected_continent):
    filtered_df = df[df['continent'] == selected_continent]
    fig = px.scatter(
        filtered_df, 
        x="gdpPercap", y="lifeExp",
        size="pop", color="country",
        hover_name="country",
        log_x=True, size_max=60,
        title=f"{selected_continent} 国家数据"
    )
    return fig

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

效果：选择不同洲，散点图实时更新。

---

5. 多输入 + 多输出 + 滑块控制

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

app = Dash(__name__)
df = px.data.gapminder()

app.layout = html.Div([
    html.H3("GDP 与寿命趋势分析"),

    html.Div([
        html.Label("选择年份范围："),
        dcc.RangeSlider(
            id='year-slider',
            min=df['year'].min(),
            max=df['year'].max(),
            value=[2000, 2007],
            marks={i: str(i) for i in range(1950, 2030, 10)},
            step=5
        )
    ], style={'width': '80%', 'margin': '20px'}),

    dcc.Graph(id='line-chart')
])

@app.callback(
    Output('line-chart', 'figure'),
    Input('year-slider', 'value')
)
def update_chart(year_range):
    filtered = df[(df['year'] >= year_range[0]) & (df['year'] <= year_range[1])]
    fig = px.line(
        filtered, x='year', y='lifeExp', color='continent',
        title=f"预期寿命趋势 ({year_range[0]} - {year_range[1]})"
    )
    return fig

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

---

6. 布局技巧（多列、卡片、响应式）

app.layout = html.Div([
    html.Div([
        html.H2("控制面板", className="card-title"),
        dcc.Dropdown(...),
        dcc.Slider(...)
    ], className="card", style={'width': '30%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(id='main-graph')
    ], style={'width': '65%', 'display': 'inline-block', 'verticalAlign': 'top'})
])

配合 CSS（可内联或外部 assets/style.css）实现美化。

---

7. 部署到云（免费）

方案 1：Dash Enterprise（付费）

方案 2：Render / Railway / PythonAnywhere（免费层）

示例：部署到 Render

1. 将代码推到 GitHub
2. 在 render.com 创建 Web Service
3. 选择 Python，设置：

• Build Command: pip install -r requirements.txt
• Start Command: gunicorn app:server（需改 app.py 末尾为 server = app.server）

requirements.txt：

dash
pandas
plotly
gunicorn

---

8. 进阶功能

功能	代码片段
上传文件	dcc.Upload
下载数据	dcc.Download
多页面	dash-pages 或 dcc.Location
状态管理	使用 State 输入
实时更新	dcc.Interval + 回调

---

9. 完整项目模板（可复制）

my-dash-app/
├── app.py
├── requirements.txt
├── assets/
│   └── style.css
└── data/
    └── dataset.csv

---

学习资源

资源	链接
官方文档	https://dash.plotly.com
官方示例	https://dash.gallery
中文教程	https://github.com/cn/awesome-dash
B站视频	搜索 “Python Dash 教程”

---

小练习（自己动手）

1. 用 tips 数据集做小费分析仪表盘（含下拉菜单 + 饼图 + 柱状图）
2. 添加“导出 CSV”按钮
3. 使用 dcc.Tabs 实现多页面切换

---

需要我帮你生成 完整可运行的项目代码包（含数据、样式、部署脚本）吗？可以回复：

“给我一个完整 Dash 项目模板（包含 tips 数据分析）”

我可以打包成 .zip 结构说明或直接给出代码。

祝你玩得开心！🚀