Dash 安装使用教程-EW帮帮网

一、Dash 简介

Dash 是一个基于 Python 的 Web 应用框架，专为构建数据可视化界面而设计。它由 Plotly 团队开发，适合构建交互式仪表盘、可视化分析工具和 Web 应用，无需使用 JavaScript。

二、安装 Dash

2.1 使用 pip 安装

pip install dash

推荐同时安装 Plotly：

pip install plotly

2.2 验证安装

python -c "import dash; print(dash.__version__)"

三、Dash 应用结构

Dash 应用由以下三部分组成：

Layout：应用的页面结构和元素；
Callback：用户交互逻辑；
Server：运行应用的 Web 服务。

四、第一个 Dash 示例

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1("Hello Dash!"),
    html.P("这是你的第一个 Dash 应用")
])

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

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

五、添加图表与交互组件

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

df = px.data.gapminder().query("year == 2007")

app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("GDP 与寿命关系"),
    dcc.Dropdown(
        id="continent",
        options=[{"label": c, "value": c} for c in df["continent"].unique()],
        value="Asia"
    ),
    dcc.Graph(id="scatter")
])

@app.callback(
    dash.dependencies.Output("scatter", "figure"),
    [dash.dependencies.Input("continent", "value")]
)
def update_graph(continent):
    filtered = df[df["continent"] == continent]
    fig = px.scatter(filtered, x="gdpPercap", y="lifeExp",
                     size="pop", color="country", hover_name="country",
                     log_x=True, size_max=60)
    return fig

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

六、部署 Dash 应用

6.1 本地部署（开发阶段）

python app.py

6.2 使用 gunicorn + Flask（生产）

pip install gunicorn
gunicorn app:server

6.3 使用平台部署

Heroku（适合初学者）
Render、Vercel、Railway（支持免费试用）
Docker 镜像部署到云服务器

七、常见问题

Q1: 报错 “ModuleNotFoundError: No module named ‘dash’”？

请确认使用了正确的 Python 环境，并已安装 Dash：

pip install dash

Q2: 网页打不开？

确保 Dash 应用正常运行，访问地址为：http://127.0.0.1:8050/

八、推荐学习资源

Dash 官方文档
Plotly 图表库
Dash 中文社区
《Interactive Dashboards and Data Apps with Plotly and Dash》

本文由“小奇Java面试”原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。

在这里插入图片描述

Dash 安装使用教程