https://dash.plotly.com/introduction）。Flask提供了Web服务器功能。React.js呈现网页的用户界面。Plotly.js生成您在应用程序中使用的图表。https://plotly.com/）公司建立了Dash并支持其发展。您可能从共享其名称的流行图形库(https://plotly.com/graphing-libraries/)中了解该公司。Plotly公司开放了Dash的源代码，并根据MIT许可证发布了它，因此您可以免费使用Dash。https://dash-gallery.plotly.host/dash-web-trader/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 Analytics</h1>
<p>
Analyze the behavior of avocado prices and the number
of avocados sold in the US between 2015 and 2018
</p>
<!-- Rest of the app -->
</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。联系客服
