Python 交互式数据可视化框架：Dash（上）
Python中文社区
共 7468字，需浏览 15分钟
·
2021-01-15 18:37
https://dash.plotly.com/introduction）。创建一个Dash应用程序 如何使用Dash核心组件和HTML组件 自定义Dash应用程序的样式 使用回调函数构建交互式应用程序 在Heroku上部署您的应用程序
1、 Flask提供了Web服务器功能。2、 React.js呈现网页的用户界面。3、 Plotly.js生成您在应用程序中使用的图表。
https://plotly.com/）公司建立了Dash并支持其发展。您可能从共享其名称的流行图形库(https://plotly.com/graphing-libraries/)中了解该公司。Plotly公司开放了Dash的源代码，并根据MIT许可证发布了它，因此您可以免费使用Dash。可实时分析交易头寸的dashboard仪表盘 https://dash-gallery.plotly.host/dash-web-trader/数百万个 Uber 行程的可视化
https://dash-gallery.plotly.host/dash-uber-rides-demo/一个交互式的财务报告
https://dash-gallery.plotly.host/dash-financial-report/https://dash-gallery.plotly.host/Portal/）。https://www.kaggle.com/neuromusic/avocado-prices）。该数据集由Justin Kiggins使用Hass Avocado Board(https://www.hassavocadoboard.com/retail/volume-and-price-data)提供的数据整理而来。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在项目的根目录中。到目前为止，您应该已经有了一个虚拟环境，其中包含必需的库以及项目根文件夹中的数据。您项目的结构应如下所示：avocado_analytics/
|
├── venv/
|
└── avocado.csv
根据应用的布局来定义应用的外观。 使用回调函数来确定应用程序的哪些部分是交互式的，以及它们如何响应。
app.py的空文件，然后在本节中查看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。每个库都为您的应用程序提供了一个构建模块：dash可帮助您初始化应用程序。dash_core_components允许您创建交互式组件，例如图形，下拉列表或日期范围。dash_html_components使您可以访问HTML标记。pandas可以帮助您阅读和整理数据。
Flask（__ name__）初始化WSGI应用程序。同样，对于Dash应用程序，您可以使用Dash（__ name__）。layout属性。此属性决定了您应用的外观。在这种情况下，您将使用标题下方带有说明的标题和两个图表。定义方式如下：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对象的layout属性。此属性使用由Dash组件组成的树结构确定应用程序的外观。Dash HTML Components(https://dash.plotly.com/dash-html-components)为HTML元素提供Python包装器。例如，您可以使用此库来创建元素，例如段落，标题或列表。Dash Core Components(https://dash.plotly.com/dash-core-components)组件为您提供了用于创建交互式用户界面的Python模块。您可以使用它来创建交互式元素，例如图形，滑块或下拉菜单。html.Div。然后，再添加两个元素，即标题（html.H1）和段落（html.P）作为其子元素。div，h1和p HTML标签。您可以使用组件的参数来修改标签的属性或内容。例如，要指定div标记内的内容，请使用html.Div中的children参数。style，className或id，它们引用HTML标签的属性。在下一部分中，您将看到如何使用其中的一些属性来设置仪表板的样式。<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标记，其中包含h1和p元素。app.layout中有两个dcc.Graph组件。第一个绘制了研究期间鳄梨的平均价格，第二个绘制了同期美国鳄梨的销售数量。Plotly.js生成图形。dcc.Graph组件需要一个包含绘图数据和布局的图形对象或Python字典。在这种情况下，请提供后者。if __name__ == "__main__":
app.run_server(debug=True)
app.run_server的debug = True参数在您的应用程序中启用热重载(hot-reloading)选项。这意味着当您对应用程序进行更改时，它会自动重新加载，而无需重新启动服务器。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__)
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，然后使用您喜欢的浏览器访问http：// localhost：8050。
更多阅读
特别推荐
点击下方阅读原文加入社区会员
评论