关于 Dash

Dash 是数据科学技术栈中极其强大且重要的组件，作为一种低代码解决方案，用于构建数据驱动的网页应用。Dash 基于 Plotly.js、React 和 Flask 构建，使开发者无需掌握复杂的网页开发细节即可创建出令人惊艳的应用程序。

凭借其吸引人的用户界面组件和卓越的交互性，Dash 正日益成为数据分析师、数据科学家以及机器学习工程师的首选工具，帮助他们以直观易懂的形式呈现数据驱动的企业洞察。

在 Jupyter Notebook 中使用 Dash 时，可以安装 Jupyter Dash，这是一个扩展库，允许我们在笔记本单元格中直接运行 Dash 应用。本地开发时，也可以将应用代码保存为 .py 文件，并像执行普通 Python 文件一样运行它。例如：

1python my_app.py

Dash 的特性

在本课程中，我们使用的是免费开源版本的 Dash。然而，Dash Enterprise 提供了更多高级功能，已被 S&P Global、加拿大航空以及犹他爵士队等知名企业广泛信赖。下图详细对比了 Dash（开源版）与 Dash Enterprise 的各项功能。

快速入门

使用 Dash 时，只需实例化一个应用对象，定义应用的布局，添加用户交互功能，并提供运行应用所需的命令即可。

就这么简单。

通过前几章对 Plotly 的学习，我们已经具备了掌握 Dash 的良好基础——因为 Plotly 的图形对象可以无缝地作为组件嵌入到 Dash 的布局中，从而清晰、生动地展示数据，为用户提供丰富而互动的体验。成功构建 Dash 应用后，我们可以将其在本地运行，或部署给他人查看。

以下代码可快速创建一个简单的本地运行的 Dash 应用：

1# 导入必要的库
2from jupyter_dash import JupyterDash
3from dash import html, dcc
4import plotly.express as px
5import pandas as pd
6
7# 定义数据
8product = ['裤子', '衬衫', '袜子', '帽子']
9purchases = [4, 7, 3, 9]
10data = pd.DataFrame({'product': product, 'purchases': purchases})
11
12# 初始化应用
13app = JupyterDash(__name__)
14
15# 定义应用布局
16app.layout = html.Div(
17    [
18        html.H1("产品购买情况"),
19        dcc.Graph(figure=px.pie(data, values='purchases', names='product'))
20    ]
21)
22
23# 运行应用
24if __name__ == "__main__":
25    app.run_server(debug=True)

这段代码使用 Dash 框架（具体为适用于 Jupyter Notebook 的 JupyterDash 扩展）创建了一个简单的网页应用，用于展示产品购买情况的饼图。

1. 第 1–5 行：导入必要库

   • JupyterDash：Dash 网页应用框架的扩展，专为 Jupyter Notebook 设计。
   • html 与 dcc 来自 dash：用于构建应用布局和添加交互功能的组件。
   • plotly.express 作为 px：用于创建交互式图表的高级绘图库。
   • pandas 作为 pd：用于数据处理的库，在此处用于创建存储数据的 DataFrame。

2. 第 7–10 行：定义数据

   • product：产品名称列表。
   • purchases：每种产品对应的购买数量。
   • data：由 product 和 purchases 列表创建的 pandas DataFrame，包含名为 'product' 和 'purchases' 的列。

3. 第 12–13 行：初始化应用

   • app：通过 JupyterDash 类创建实例，传入 __name__ 作为应用名称。

4. 第 15–21 行：定义应用布局

   • app.layout：应用组件的层级结构。此处包含一个 html.Div 容器，其子元素有两个：
     • html.H1：显示标题“产品购买情况”的 HTML 标题元素。
     • dcc.Graph：用于显示交互式图表的 Dash 组件，其 figure 属性设置为使用 plotly.express（px.pie）生成的饼图。该饼图根据 data DataFrame 中的 purchases 值绘制，并用对应的产品名称标注每个扇区。

5. 第 23–25 行：运行应用

   • if __name__ == "__main__":：Python 常见惯用法，用于判断脚本是否作为主模块运行（而非被导入）。
   • app.run_server(debug=True)：启动 Dash 应用服务器，debug 参数设为 True 以便于开发（例如，代码更改后自动重新加载服务器）。

注意：在 Educative 平台上，由于部署机制不同，我们将略微调整运行应用的代码。默认情况下，应用会输出 "Dash app running on http://0.0.0.0:3000/"。但这个地址并非实际访问地址。我们会额外添加一条打印语句，提供 Educative 平台的访问 URL。在本地运行时，请使用 Dash 输出的第一个 URL，并注释掉最后两行代码。

1# 运行应用
2if __name__ == "__main__":
3    app.run_server(host='0.0.0.0', port='3000', debug=True)
4    # 打印应用将被服务的 URL
5    url = os.environ['EDUCATIVE_LIVE_VM_URL'] + ':3000/'
6    print("应用访问地址为：", url)

注意：当同一课中存在多个包含 Dash 应用的代码块时，必须在切换前关闭当前应用的内核。完成一个笔记本后，请从笔记本菜单中选择“Kernel > Shutdown Kernel”，再进入下一节内容。

让我们看看下面这个正在运行的应用：