Python 交互式數(shù)據(jù)可視化框架：Dash（上）
https://dash.plotly.com/introduction）。創(chuàng)建一個(gè)Dash應(yīng)用程序 如何使用Dash核心組件和HTML組件 自定義Dash應(yīng)用程序的樣式 使用回調(diào)函數(shù)構(gòu)建交互式應(yīng)用程序 在Heroku上部署您的應(yīng)用程序
1、 Flask提供了Web服務(wù)器功能。2、 React.js呈現(xiàn)網(wǎng)頁(yè)的用戶界面。3、 Plotly.js生成您在應(yīng)用程序中使用的圖表。
https://plotly.com/）公司建立了Dash并支持其發(fā)展。您可能從共享其名稱的流行圖形庫(kù)(https://plotly.com/graphing-libraries/)中了解該公司。Plotly公司開放了Dash的源代碼，并根據(jù)MIT許可證發(fā)布了它，因此您可以免費(fèi)使用Dash。可實(shí)時(shí)分析交易頭寸的dashboard儀表盤 https://dash-gallery.plotly.host/dash-web-trader/數(shù)百萬(wàn)個(gè) Uber 行程的可視化
https://dash-gallery.plotly.host/dash-uber-rides-demo/一個(gè)交互式的財(cái)務(wù)報(bào)告
https://dash-gallery.plotly.host/dash-financial-report/https://dash-gallery.plotly.host/Portal/）。https://www.kaggle.com/neuromusic/avocado-prices）。該數(shù)據(jù)集由Justin Kiggins使用Hass Avocado Board(https://www.hassavocadoboard.com/retail/volume-and-price-data)提供的數(shù)據(jù)整理而來(lái)。c:\>?mkdir?avocado_analytics?&&?cd?avocado_analytics
c:\>?c:\path\to\python\launcher\python?-m?venv?venv
c:\>?venv\Scripts\activate.bat
$?mkdir?avocado_analytics?&&?cd?avocado_analytics
$?python3?-m?venv?venv
$?source?venv/bin/activate
avocado_analytics的目錄?avocado_analytics目錄?venv(venv)?$?python?-m?pip?install?dash==1.13.3?pandas==1.0.5
avocado.csv在項(xiàng)目的根目錄中。到目前為止，您應(yīng)該已經(jīng)有了一個(gè)虛擬環(huán)境，其中包含必需的庫(kù)以及項(xiàng)目根文件夾中的數(shù)據(jù)。您項(xiàng)目的結(jié)構(gòu)應(yīng)如下所示：avocado_analytics/
|
├──?venv/
|
└──?avocado.csv
根據(jù)應(yīng)用的布局來(lái)定義應(yīng)用的外觀。 使用回調(diào)函數(shù)來(lái)確定應(yīng)用程序的哪些部分是交互式的，以及它們?nèi)绾雾憫?yīng)。
app.py的空文件，然后在本節(jié)中查看app.py的代碼。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)
app?=?dash.Dash(__name__)
dash，dash_core_components，dash_html_components和pandas。每個(gè)庫(kù)都為您的應(yīng)用程序提供了一個(gè)構(gòu)建模塊：dash可幫助您初始化應(yīng)用程序。dash_core_components允許您創(chuàng)建交互式組件，例如圖形，下拉列表或日期范圍。dash_html_components使您可以訪問(wèn)HTML標(biāo)記。pandas可以幫助您閱讀和整理數(shù)據(jù)。
Flask（__ name__）初始化WSGI應(yīng)用程序。同樣，對(duì)于Dash應(yīng)用程序，您可以使用Dash（__ name__）。layout屬性。此屬性決定了您應(yīng)用的外觀。在這種情況下，您將使用標(biāo)題下方帶有說(shuō)明的標(biāo)題和兩個(gè)圖表。定義方式如下：app.layout?=?html.Div(
????children=[
????????html.H1(children="Avocado?Analytics",),
????????html.P(
????????????children="Analyze?the?behavior?of?avocado?prices"
????????????"?and?the?number?of?avocados?sold?in?the?US"
????????????"?between?2015?and?2018",
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["AveragePrice"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Average?Price?of?Avocados"},
????????????},
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["Total?Volume"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Avocados?Sold"},
????????????},
????????),
????]
)
app對(duì)象的layout屬性。此屬性使用由Dash組件組成的樹結(jié)構(gòu)確定應(yīng)用程序的外觀。Dash HTML Components(https://dash.plotly.com/dash-html-components)為HTML元素提供Python包裝器。例如，您可以使用此庫(kù)來(lái)創(chuàng)建元素，例如段落，標(biāo)題或列表。Dash Core Components(https://dash.plotly.com/dash-core-components)組件為您提供了用于創(chuàng)建交互式用戶界面的Python模塊。您可以使用它來(lái)創(chuàng)建交互式元素，例如圖形，滑塊或下拉菜單。html.Div。然后，再添加兩個(gè)元素，即標(biāo)題（html.H1）和段落（html.P）作為其子元素。div，h1和p HTML標(biāo)簽。您可以使用組件的參數(shù)來(lái)修改標(biāo)簽的屬性或內(nèi)容。例如，要指定div標(biāo)記內(nèi)的內(nèi)容，請(qǐng)使用html.Div中的children參數(shù)。style，className或id，它們引用HTML標(biāo)簽的屬性。在下一部分中，您將看到如何使用其中的一些屬性來(lái)設(shè)置儀表板的樣式。<div>
??<h1>Avocado?Analyticsh1>
??<p>
????Analyze?the?behavior?of?avocado?prices?and?the?number
????of?avocados?sold?in?the?US?between?2015?and?2018
??p>
??
div>
div標(biāo)記，其中包含h1和p元素。app.layout中有兩個(gè)dcc.Graph組件。第一個(gè)繪制了研究期間鱷梨的平均價(jià)格，第二個(gè)繪制了同期美國(guó)鱷梨的銷售數(shù)量。Plotly.js生成圖形。dcc.Graph組件需要一個(gè)包含繪圖數(shù)據(jù)和布局的圖形對(duì)象或Python字典。在這種情況下，請(qǐng)?zhí)峁┖笳摺?/span>if?__name__?==?"__main__":
????app.run_server(debug=True)
app.run_server的debug = True參數(shù)在您的應(yīng)用程序中啟用熱重載(hot-reloading)選項(xiàng)。這意味著當(dāng)您對(duì)應(yīng)用程序進(jìn)行更改時(shí)，它會(huì)自動(dòng)重新加載，而無(wú)需重新啟動(dòng)服務(wù)器。app.py的完整版本。您可以將此代碼復(fù)制到之前創(chuàng)建的空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)
app?=?dash.Dash(__name__)
app.layout?=?html.Div(
????children=[
????????html.H1(children="Avocado?Analytics",),
????????html.P(
????????????children="Analyze?the?behavior?of?avocado?prices"
????????????"?and?the?number?of?avocados?sold?in?the?US"
????????????"?between?2015?and?2018",
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["AveragePrice"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Average?Price?of?Avocados"},
????????????},
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["Total?Volume"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Avocados?Sold"},
????????????},
????????),
????]
)
if?__name__?==?"__main__":
????app.run_server(debug=True)
python app.py，然后使用您喜歡的瀏覽器訪問(wèn)http：// localhost：8050。
更多閱讀
特別推薦
點(diǎn)擊下方閱讀原文加入社區(qū)會(huì)員
評(píng)論
圖片
表情