Python 交互式數(shù)據(jù)可視化框架：Dash（中）
style參數(shù)自定義儀表板非常簡單。此參數(shù)采用帶有鍵值對的Python字典，鍵值對由CSS屬性的名稱和要設置的值組成。app.py中更改H1元素的大小和顏色，則可以如下設置元素的style參數(shù)：html.H1（
????children?=“?Avocado?Analytics”，
??? style =?{“ fontSize”：“?48px”，“ color”：“ red”}，
），
style參數(shù)的不利之處在于，隨著代碼庫的增長，它無法很好地擴展。如果您的信息中心中有多個您希望外觀相同的組件，那么您將不得不重復寫很多代碼。相反，您可以使用自定義CSS文件。asset/的文件夾，然后將要添加的文件保存在其中。默認情況下，Dash自動提供asset/中包含的任何文件。如后文中所示，這也可以用于添加收藏夾圖標或嵌入圖像。className或id參數(shù)來使用CSS調(diào)整其樣式。這些參數(shù)在轉(zhuǎn)換為HTML標簽后便與class和id屬性相對應。app.py中H1元素的字體大小和文本顏色，則可以使用className參數(shù)，如下所示：html.H1(
????children="Avocado?Analytics",
????className="header-title",
),
className參數(shù)將定義H1元素的class屬性。然后，您可以在assets文件夾中使用一個CSS文件來指定外觀：.header-title?{
??font-size:?48px;
??color:?red;
}
className =“ header-title”將它與需要共享格式的其他元素一起使用。在頁面上添加一個圖標和標題 更改儀表板的字體系列 使用外部CSS文件設置Dash組件的樣式
className參數(shù)將自定義樣式應用于Dash組件。asset /的文件夾。從Twemoji開源項目中下載一個圖標，并將其另存為Asset /中的favicon.ico。最后，在assets /中創(chuàng)建一個名為style.css的CSS文件，并創(chuàng)建代碼如下。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程序布局中的組件樣式。現(xiàn)在，您的項目結(jié)構(gòu)應如下所示：avocado_analytics/
│
├──?assets/
│???├──?favicon.ico
│???└──?style.css
│
├──?venv/
│
├──?app.py
└──?avocado.csv
Assets /中的文件。您在asset/中包含兩個文件：favicon.ico和style.css。要設置默認圖標，您無需采取任何其他步驟。要使用您在style.css中定義的樣式，您需要在Dash組件中使用className參數(shù)。app.py需要一些更改。其中包括一個外部樣式表，在儀表板上添加標題，并使用style.css文件對組件進行樣式設置。查看下面的更改。然后，在本節(jié)的最后部分，您將找到更新版本的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參數(shù)來添加外部CSS文件或為外部JavaScript文件（例如Google Analytics（分析））添加external_scripts。style.css中使用樣式，您需要在Dash組件中使用className參數(shù)。下面的代碼向構(gòu)成儀表板標題的每個組件中添加一個帶有相應類選擇器的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參數(shù)。這些類名稱應與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參數(shù)定義一個className和一些自定義項。更改如下：第43行：您刪除了默認情況下Plotly顯示的浮動條。 第50和51行：設置懸停模板，以便當用戶將鼠標懸停在數(shù)據(jù)- 點上時，它以美元顯示價格。而不是2.5，而是顯示為 $ 2.5。第54到66行：您可以在圖表的布局部分中調(diào)整軸，圖形的顏色和標題格式。 第69行：使用 “ card”類將圖形包裝在html.Div中。這將使圖形具有白色背景，并在其下方添加一個小陰影。銷售量和數(shù)量圖表也有類似的調(diào)整。
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文件。完成這些更改后，儀表板應如下所示：
更多閱讀
特別推薦
點擊下方閱讀原文加入社區(qū)會員
評論
圖片
表情