Python 交互式数据可视化框架：Dash（中）
Python中文社区
共 9732字，需浏览 20分钟
·
2021-01-19 08:18
style参数自定义仪表板非常简单。此参数采用带有键值对的Python字典，键值对由CSS属性的名称和要设置的值组成。app.py中更改H1元素的大小和颜色，则可以如下设置元素的style参数：html.H1（
children =“ Avocado Analytics”，
style = {“ fontSize”：“ 48px”，“ color”：“ red”}，
），
style参数的不利之处在于，随着代码库的增长，它无法很好地扩展。如果您的信息中心中有多个您希望外观相同的组件，那么您将不得不重复写很多代码。相反，您可以使用自定义CSS文件。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;
}
className =“ header-title”将它与需要共享格式的其他元素一起使用。在页面上添加一个图标和标题 更改仪表板的字体系列 使用外部CSS文件设置Dash组件的样式
className参数将自定义样式应用于Dash组件。asset /的文件夹。从Twemoji开源项目中下载一个图标，并将其另存为Asset /中的favicon.ico。最后，在assets /中创建一个名为style.css的CSS文件，并创建代码如下。body {
font-family: "Lato", sans-serif;
margin: 0;
background-color: #F7F7F7;
}
.header {
background-color: #222222;
height: 256px;
display: flex;
flex-direction: column;
justify-content: center;
}
.header-emoji {
font-size: 48px;
margin: 0 auto;
text-align: center;
}
.header-title {
color: #FFFFFF;
font-size: 48px;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.header-description {
color: #CFCFCF;
margin: 4px auto;
text-align: center;
max-width: 384px;
}
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 1024px;
padding-right: 10px;
padding-left: 10px;
margin-top: 32px;
}
.card {
margin-bottom: 24px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
assets/文件包含您将应用于APP程序布局中的组件样式。现在，您的项目结构应如下所示：avocado_analytics/
│
├── assets/
│ ├── favicon.ico
│ └── style.css
│
├── venv/
│
├── app.py
└── avocado.csv
Assets /中的文件。您在asset/中包含两个文件：favicon.ico和style.css。要设置默认图标，您无需采取任何其他步骤。要使用您在style.css中定义的样式，您需要在Dash组件中使用className参数。app.py需要一些更改。其中包括一个外部样式表，在仪表板上添加标题，并使用style.css文件对组件进行样式设置。查看下面的更改。然后，在本节的最后部分，您将找到更新版本的app.py的完整代码。external_stylesheets = [
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wght@400;700&display=swap",
"rel": "stylesheet",
},
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"
head标签中，并在应用程序主体加载之前加载。您可以使用external_stylesheets参数来添加外部CSS文件或为外部JavaScript文件（例如Google Analytics（分析））添加external_scripts。style.css中使用样式，您需要在Dash组件中使用className参数。下面的代码向构成仪表板标题的每个组件中添加一个带有相应类选择器的className：app.layout = html.Div(
children=[
html.Div(
children=[
html.P(children="🥑", className="header-emoji"),
html.H1(
children="Avocado Analytics", className="header-title"
),
html.P(
children="Analyze the behavior of avocado prices"
" and the number of avocados sold in the US"
" between 2015 and 2018",
className="header-description",
),
],
className="header",
),
className参数。这些类名称应与style.css中的类选择器匹配，该选择器将定义每个组件的外观。header-description类在style.css中具有相应的选择器：.header-description {
color: #CFCFCF;
margin: 4px auto;
text-align: center;
max-width: 384px;
}
style.css的第29至34行定义了header-description类选择器的格式。这些将更改任何带有className =“ header-description”的组件的颜色、边距、对齐方式和最大宽度。所有组件在CSS文件中都有相应的类选择器。html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart",
config={"displayModeBar": False},#43行
figure={
"data": [
{
"x": data["Date"],
"y": data["AveragePrice"],
"type": "lines",
"hovertemplate": "$%{y:.2f}"#50行
"
},
],
"layout": { #54行
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {
"tickprefix": "$",
"fixedrange": True,
},
"colorway": ["#17B897"],
}, #66行
},
),
className="card", #69行
),
config和Figure参数定义一个className和一些自定义项。更改如下：第43行：您删除了默认情况下Plotly显示的浮动条。 第50和51行：设置悬停模板，以便当用户将鼠标悬停在数据- 点上时，它以美元显示价格。而不是2.5，而是显示为 $ 2.5。第54到66行：您可以在图表的布局部分中调整轴，图形的颜色和标题格式。 第69行：使用 “ card”类将图形包装在html.Div中。这将使图形具有白色背景，并在其下方添加一个小阴影。销售量和数量图表也有类似的调整。
app.py。import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
data = pd.read_csv("avocado.csv")
data = data.query("type == 'conventional' and region == 'Albany'")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)
external_stylesheets = [
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wght@400;700&display=swap",
"rel": "stylesheet",
},
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"
app.layout = html.Div(
children=[
html.Div(
children=[
html.P(children="🥑", className="header-emoji"),
html.H1(
children="Avocado Analytics", className="header-title"
),
html.P(
children="Analyze the behavior of avocado prices"
" and the number of avocados sold in the US"
" between 2015 and 2018",
className="header-description",
),
],
className="header",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart",
config={"displayModeBar": False},
figure={
"data": [
{
"x": data["Date"],
"y": data["AveragePrice"],
"type": "lines",
"hovertemplate": "$%{y:.2f}"
"
},
],
"layout": {
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {
"tickprefix": "$",
"fixedrange": True,
},
"colorway": ["#17B897"],
},
},
),
className="card",
),
html.Div(
children=dcc.Graph(
id="volume-chart",
config={"displayModeBar": False},
figure={
"data": [
{
"x": data["Date"],
"y": data["Total Volume"],
"type": "lines",
},
],
"layout": {
"title": {
"text": "Avocados Sold",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {"fixedrange": True},
"colorway": ["#E12D39"],
},
},
),
className="card",
),
],
className="wrapper",
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
app.py的更新版本。它对代码进行了必要的更改，以添加收藏夹图标和页面标题，更新字体系列并使用外部CSS文件。完成这些更改后，仪表板应如下所示：
更多阅读
特别推荐
点击下方阅读原文加入社区会员
评论