Python 交互式数据可视化框架：Dash（上）
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_analyticsc:\> c:\path\to\python\launcher\python -m venv venvc:\> 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.5avocado.csv在项目的根目录中。到目前为止，您应该已经有了一个虚拟环境，其中包含必需的库以及项目根文件夹中的数据。您项目的结构应如下所示：avocado_analytics/
|
├── venv/
|
└── avocado.csv
根据应用的布局来定义应用的外观。 使用回调函数来确定应用程序的哪些部分是交互式的，以及它们如何响应。
app.py的空文件，然后在本节中查看app.py的代码。app.py的前几行：import dashimport dash_core_components as dccimport dash_html_components as htmlimport 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 dashimport dash_core_components as dccimport dash_html_components as htmlimport 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。 赞 (0)