使用 Dash 进行 Python 数据可视化界面开发

引言

在本文中，我们将讨论如何使用 Dash 在 Python 中开发数据可视化界面。过去，开发分析型 Web 应用程序对经验丰富的开发人员来说是一项挑战，需要掌握多种编程语言和框架。现在情况已不再如此。最近，您可以使用纯 Python 制作数据可视化界面。Dash 就是其中一个流行的工具。Dash 允许数据科学家在交互式网络应用程序中展示他们的结果。您无需成为 Web 开发专家。您可以构建和部署 Dash 应用程序，每天与他人共享。

Dash 是什么意思？

Dash 是一个用于构建数据可视化界面的开源框架。它于 2017 年作为 Python 库发布，现已发展到包括 R、Julia 和 F# 的实现。Dash 使数据科学家能够构建分析型 Web 应用程序，而无需高级 Web 开发知识。

三种技术构成了 Dash 的核心

1. Flask 提供 Web 服务器功能。
2. React.js 渲染网页的用户界面。
3. Plotly.js 生成您的应用程序使用的图表。

但您可以将大多数这些技术结合起来工作。Dash 会为您完成这些。您需要编写 Python、R、Julia 或 F#，并添加一些 CSS。Plotly 是一家总部位于加拿大的公司，它构建了 Dash 并帮助其发展。您可能从其同名的流行绘图库中了解该公司。该公司在 MIT 许可下开源了 Dash，因此您可以免费使用 Dash。Plotly 还提供了一个名为 Dash Enterprise 的商业合作伙伴。这项付费服务为团队提供支持服务，包括 Dash 应用程序的 Web 托管、部署和身份验证管理。但这些功能存在于 Dash 的开源生态系统之外。Dash 将帮助您快速构建仪表板。如果您习惯于使用 Python 分析记录或构建事实可视化，那么 Dash 将成为您工具箱中的有用补充。以下是您可以使用 Dash 制作的一些示例

1. 一个显示自动驾驶汽车物体检测的仪表板
2. 数百万次 Uber 乘车的可视化
3. 一个用于分析足球比赛信息的交互式工具

这只是一个很小的样本。如果您想查看其他有趣的用例，请查看 Dash 应用画廊。如果您对要求感到满意并希望了解如何在下一个项目中开始使用 Dash，请继续阅读下一部分。

在 Python 中开始使用 Dash

在本教程中，您将经历使用 Dash 构建仪表板的整个过程。如果您遵循示例，您将从本地机器上的一个简陋仪表板到一个部署在 PythonAnywhere 上的样式化仪表板。为了构建仪表板，您将使用 2015 年至 2018 年美国鳄梨销售和价格数据集。Justin Kiggins 使用 Hass Avocado Board 的数据编译了此数据集。

本地环境设置过程

您将需要一个新目录来存储您的代码和数据以开发您的应用程序。您还将需要一个干净的 Python 虚拟环境。要创建这些，请执行以下命令，选择适合您操作系统的版本

前两个命令会为您的项目创建一个目录，并将您的当前位置移动到该目录。下一个命令在该位置创建虚拟环境。最后一个命令激活虚拟环境。接下来，您需要安装所需的库。您可以尝试在您的虚拟环境中使用 pip。如下安装库

此命令将在您的虚拟环境中安装 Dash 和 Pandas。您将使用这些程序的版本以确保您拥有与本教育期间使用的环境相同的环境。除了 Dash，Pandas 将帮助您读取和整理将在应用程序中使用的数据。

最后，您需要一些数据来填充您的仪表板。您可以下载本教程中看到的数据和代码。将数据保存为 avocado.csv 到项目的根目录中。现在，您应该拥有一个包含所需库的虚拟环境和项目根文件夹中的数据。您的项目结构应如下所示

程序结构

构建 Dash 应用程序的过程是什么？

为了开发目的，将构建 Dash 应用程序的过程分为三个步骤是有益的

1. 定义应用程序的内容和应用程序的布局使用。
2. 使用 CSS 或 styled-components 设计应用程序的外观。
3. 使用回调来确定应用程序的哪些部分是交互式的以及它们对什么做出反应。

在此阶段，您将学习布局。接下来，您将学习样式，在稍后的部分中，您将学习如何使仪表板具有交互性。您将首先设置初始化应用程序所需的一切，然后定义应用程序的布局。

如何初始化 Dash 应用程序？

在项目根目录中创建一个名为 app.py 的空文件，然后在此部分中评估 app.py 的代码。为了更容易复制完整的代码，您将在本部分末尾找到 app.py 的完整内容。这是 app.py 的前几行

程序代码

您在第 3 行和第 4 行导入所需的库：pandas 和 dash。您将使用 pandas 来读取和组织数据。您将从 dash 导入以下元素

1. Dash 允许您初始化应用程序。
2. html，也称为 Dash HTML 组件，帮助您访问 HTML 标签。
3. dcc，Dash 核心组件的缩写，允许您创建交互式组件，如图表、下拉菜单或日期范围。

在第 6 到 11 行，您读取数据并对其进行预处理以用于仪表板。过滤一些数据，因为您的仪表板需要更具交互性，否则绘制的值将毫无意义。在第 13 行，您创建了 Dash 类的实例。如果您以前使用过 Flask，那么初始化 Dash 类可能看起来很熟悉。在 Flask 中，您通常使用 Flask(__name__) 初始化 WSGI 应用程序。同样，您使用 dash(__name__) 初始化 Dash 应用程序。

定义 Dash 应用程序的布局

接下来，您将定义应用程序的布局属性。此属性决定了应用程序的内容。在此示例中，您将直接使用一个标题，其下有一个描述，然后是图表。定义方式如下

程序代码

使用此代码，您定义了应用程序对象的 .format 属性。此属性通过由 Dash 组件组成的树结构确定应用程序的内容。Dash 插件以 Python 库的形式预先打包。其中一些会在您部署时包含在 Dash 中。其余的需要单独安装。您会在几乎每个应用程序中看到两组插件

1. Dash HTML Components 模块为您提供了 HTML 元素的 Python 包装器。例如，您可以使用 Dash HTML Components 来创建段落、标题或列表等元素。
2. Dash Core Components 模块为您提供了用于创建交互式用户界面的 Python 抽象。您可以使用这些组件来创建图表、滑块或下拉菜单等交互式元素。

在第 5 到 13 行，您将看到 Dash HTML 组件的实际应用。您首先定义父元素 html.Div。然后，您将更多元素（一个标题 (html.H1) 和一个段落 (html.P)）添加为其子元素。

这些组件等同于 HTML 标签。您可以使用组件的参数修改属性或标签的内容。例如，要指定标签内部的内容，您可以使用 html.Div 中的子参数。组件中还有其他参数，包括 style、className 和 id，它们引用 HTML 标签的属性。您将在下一节中看到如何使用其中几个属性来为仪表板设置样式。布局中第 5 到 13 行所示的部分将转换为以下 HTML 代码

HTML 中的程序代码

当您在浏览器中打开应用程序时，此 HTML 代码会呈现。它遵循您的 Python 代码的结构，包含一个包含和

详细信息。在布局代码片段的第 14 行和第 26 行，您可以看到 Dash Core Components 中的图表组件的实际应用。app.format 中有两个 dcc.Graph 组件。第一个绘制研究期间鳄梨的平均价格，第二个绘制美国同期销售的鳄梨数量。

在幕后，Dash 使用 Plotly.js 生成图表。dcc.Graph 组件需要一个父对象或一个包含绘图数据和格式的 Python 字典。在这种情况下，您提供后者。最后，这两行代码帮助您运行应用程序

Python 中的程序代码

这些行使用 Flask 的内置服务器在本地运行 Dash 应用程序。debug=True 参数在您的应用程序中启用热重载选项。这意味着当您更改应用程序时，它将自动重新加载，而无需重新启动服务器。您可以展开以下框以在单个列表中查看完整的源代码

这是您简陋仪表板的代码。它包含您在本节前面查看的所有代码片段。现在是运行您的应用程序的时候了。打开项目根目录中的终端，并激活项目的虚拟环境。

如何对组件应用样式？

我们可以通过两种方式设计附加组件

1. 使用单个组件的 style 参数
2. 提供外部 CSS 文件

使用 style 参数自定义您的仪表板很简单。此参数接受一个 Python 字典，其中包含键值对、CSS 属性名称以及您要设置的值。在 style 参数中指定 CSS 属性时，您需要使用驼峰式语法而不是连字符分隔的词。例如，要更改元素的背景颜色，您需要使用 backgrounds 而不是 background-color。如果您想更改 app.py 中 H1 元素的尺寸和颜色，那么您可以将元素的 style 参数设置为如下所示

Python 中的程序代码

在这里，您提供了一个样式字典，其中包含您想要设置的属性和相应的值。在这种情况下，所需的样式是红色标题，字体大小为 50 像素。

使用 style 参数的缺点是随着代码库的增长，它的可扩展性较差。如果您的仪表板有多个需要外观相同的组件，您将重复大量代码。相反，您可以使用自定义 CSS 文件。

假设您需要包含本地 CSS 或 JavaScript 文件。在这种情况下，您需要在项目根目录中创建一个名为 assets/ 的文件夹，并将需要添加的文件存储在那里。默认情况下，Dash 会自动提供 assets/ 中包含的任何文件。这也可以用于添加网站图标或嵌入图像，如稍后所示。

然后，您可以使用组件的 classname 或 id 参数使用 CSS 为它们设置样式。当转换为 HTML 标签时，这些参数对应于 class 和 id 属性。如果您想调整 app.py 中 H1 元素的字体大小和文本颜色，您可以像这样使用 classname 参数

如何让仪表板更好看？

您刚刚涵盖了 Dash 中样式设计的基础知识。现在，您将学习如何自定义仪表板的外观。您将进行以下改进

1. 添加网站图标和网页名称。
2. 更改仪表板的字体系列。
3. 使用外部 CSS 文档为 Dash 组件设置样式。

您将首先学习如何在应用程序中使用外部资产。这将帮助您上传网站图标、自定义字体系列和 CSS 样式表。然后您将学习如何使用 className 参数将自定义样式应用于您的 Dash 组件。

我们如何免费创建 PythonAnywhere 帐户？

在开始之前，请确保我们已注册一个免费的 PythonAnywhere 初学者帐户，该帐户无需提供任何付款信息。也就是说，它有一些您需要注意的限制。最重要的限制将阻止我们执行以下操作

1. 一次运行多个 Web 应用程序
2. 定义自定义域名
3. 超出可用磁盘配额 (512 MB)
4. 每天使用 CPU 超过 100 秒
5. 从您的应用程序发出不受限制的 HTTP 请求

对于本教程，您不需要任何这些。如果您位于欧洲，请考虑通过 ecu.pythonanywhere.com 而不是 www.pythonanywhere.com 注册。这将确保您的数据符合 GDPR 规定，PythonAnywhere 会将数据存储在德国的服务器上。因此，您可能还会体验到稍微更快的响应时间。最后，如果您最终决定成为付费客户，您将以欧元而不是美元计费。

如果您目前不关心任何这些功能，请随意阅读上面两个 PythonAnywhere 链接中的任何一个。但是请注意，当您在一个地方注册用户名后，您将无法在另一个地方重复使用它。另一个需要仔细考虑您的用户名的原因是它必须是您的域名的一部分。在 PythonAnywhere 上注册新帐户后，您必须验证您的电子邮件地址才能在忘记密码时重置密码。此外，最好在“帐户设置”的安全选项卡上启用双因素身份验证作为额外的安全措施。

如果您刚刚创建了一个新账户，那么您就可以开始了。但如果您是之前注册的 PythonAnywhere 账户，那么您可能需要将您的系统映像更换为更新的，它附带最新的 Python 版本和更新的第三方库。撰写本文时，最新的映像名为 haggis，它附带 Python 3.10.5、pandas 1.3.5 和 dash 2.4.1。

如何安装鳄梨分析应用程序？

由于 Dash 应用程序是带有一些额外装饰的 Flask 应用程序，因此您可以利用 pythonanywhere 对这个流行的 Python Web 框架的卓越支持。

登录到您的 PythonAnywhere 帐户后，从仪表板或控制台选项卡创建一个新的 Bash shell 控制台。这将使您进入一个交互式虚拟服务器激活，允许您直接从网络浏览器远程执行命令。

许多有用的包已经为您安装，例如 Git 客户端，您将使用它将您的项目源代码导入 PythonAnywhere。您还可以通过其他方式上传文件；但是，使用 Git 似乎是最方便的。如果您仍然需要创建自己的存储库，您可以克隆实际的 Python 材料存储库以及您的示例 Dash 应用程序。

结论

在本文中，我们讨论了如何使用 Dash 在 Python 中开发数据可视化界面。您刚刚使用 Dash 构建、自定义并部署了您的第一个仪表板。您从一个简陋的仪表板发展到一个部署在 PythonAnywhere 上的完全交互式仪表板。有了这些知识，您可以使用 Dash 构建分析应用程序并与他人分享。随着越来越多的公司越来越重视数据使用，了解如何使用 Dash 将增强您在工作场所的影响力。您现在可以做到曾经只有专家才能在一天内完成的任务。现在您已准备好开发新的 Dash 应用程序。寻找数据集，思考一些有趣的 визуа化，并构建另一个仪表板。