Python 交互式数据可视化框架：Dash（中）

最新推荐文章于 2025-03-13 07:30:00 发布

Python中文社区

最新推荐文章于 2025-03-13 07:30:00 发布

阅读量2.5k

点赞数 3

文章标签：可视化 css html python 数据可视化

本文链接：https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/112855401

版权

设置Dash应用程序的样式

Dash为您提供了很大的灵活性，可以自定义应用程序的外观。您可以使用自己的 CSS 或 JavaScript 文件，设置图标（在Web浏览器上显示的小图标）以及嵌入图像等高级选项。

在本节中，您将学习如何将自定义样式应用于组件，然后为上一节中构建的仪表板设置样式。

如何对组件应用设置自定义样式

您可以通过两种方式为组件设置样式：

1、使用单个组件的样式参数

2、提供一个外部CSS文件

使用style参数自定义仪表板非常简单。此参数采用带有键值对的Python字典，键值对由CSS属性的名称和要设置的值组成。

如果您想在app.py中更改H1元素的大小和颜色，则可以如下设置元素的style参数：

html.H1（
    children =“ Avocado Analytics”，
    style = {“ fontSize”：“ 48px”，“ color”：“ red”}，
），

在这里，您可以使用属性和要为其设置的值来为字典设置样式。在这种情况下，指定的样式应具有一个红色标题，其字体大小为48像素。

使用style参数的不利之处在于，随着代码库的增长，它无法很好地扩展。如果您的信息中心中有多个您希望外观相同的组件，那么您将不得不重复写很多代码。相反，您可以使用自定义CSS文件。

如果要包括自己的本地CSS或JavaScript文件，则需要在项目的根目录中创建一个名为asset/的文件夹，然后将要添加的文件保存在其中。默认情况下，Dash自动提供asset/中包含的任何文件。如后文中所示，这也可以用于添加收藏夹图标或嵌入图像。

然后，您可以使用组件的className或id参数来使用CSS调整其样式。这些参数在转换为HTML标签后便与class和id属性相对应。

如果要调整app.py中H1元素的字体大小和文本颜色，则可以使用className参数，如下所示：

html.H1(
    children="Avocado Analytics",
    className="header-title",
),

设置className参数将定义H1元素的class属性。然后，您可以在assets文件夹中使用一个CSS文件来指定外观：

.header-title {
  font-size: 48px;
  color: red;
}

您可以使用类选择器来格式化CSS文件中的标题。该选择器将调整标题格式。您还可以通过设置className =“ header-title”将它与需要共享格式的其他元素一起使用。

接下来，您将为仪表盘设置样式。

如何改善仪表板的外观

前面介绍了Dash中样式的基础知识。现在，您将学习如何自定义仪表板的外观。您将进行以下改进：

首先，您将学习如何在应用程序中使用外部资源。这样一来，您就可以添加图标，自定义字体系列和CSS样式表。然后，您将学习如何使用className参数将自定义样式应用于Dash组件。

向您的应用程序添加外部资源

在项目的根目录中创建一个名为asset /的文件夹。从Twemoji开源项目中下载一个图标，并将其另存为Asset /中的favicon.ico。最后，在assets /中创建一个名为style.css的CSS文件，并创建代码如下。