如何在 Python Plotly 的单个浏览器页面上将多个图形添加到 Plotly Dash 应用程序？

使用 Python 和 Plotly 进行数据可视化

12个讲座 53分钟

普兰贾斯里瓦斯塔瓦

更多详情

带有 Plotly Dash 的 Python 交互式仪表板

0 讲座 0 分钟

包发布

更多详情

Plotly 是 Python 中的开源绘图库，可以生成多种不同类型的图表。Python 用户可以使用 Plotly 创建基于 Web 的交互式可视化效果，这些可视化效果可以显示在 Jupyter 笔记本中，保存到独立的 HTML 文件中，或者作为使用 Dash 的 Web 应用程序的一部分。Plotly 还可以用于静态文档发布和桌面编辑器，例如 PyCharm 和 Spyder。

Dash 是一个 Python 框架，用于创建基于 Web 的交互式仪表板应用程序。dash 库将所有必需的库添加到基于 Web 的仪表板应用程序。

在本教程中，我们将展示如何在单个浏览器页面上向 Plotly Dash 应用程序添加多个图形。按照下面给出的步骤在单个页面上生成多个 Dash 应用程序。

步骤1

导入 Dash 库。

import dash

第2步

导入 Dash 核心组件dcc和html。

from dash import dcc,html

步骤 3

导入以下 Dash 依赖项。

fromdash.dependenciesimport Input, Output

步骤4

将plotly.express模块和别名导入为px。

importplotly.expressas px

步骤 5

使用 Pandas 模块生成数据集

import pandas as pd
df_bar = pd.DataFrame({
   "Season": ["Summer", "Winter", "Autumn", "Spring"],
   "Rating": [3,2,1,4]
})

步骤 6

使用以下值生成条形图并将其存储在“fig”变量中。

fig = px.bar(df_bar, x="Season", y="Rating", barmode="group")

步骤 7

使用以下命令创建运行应用程序服务器的主要功能 -

app = dash.Dash(__name__)
if __name__ == '__main__':
   app.run_server(debug=True)

步骤 8

在两个“div”部分中为两个不同的 HTML 子项生成 App 布局。

app.layout = html.Div(children=[
   #页面顶部的元素
   html.Div([html.H1(children='Dash app1'),
   html.Div(children='''Dash: First graph.'''),
   dcc.Graph(id='graph1',figure=fig),]),

   #页面新“行”中所有元素的新 Div
   html.Div([
      html.H1(children='Dash app2'),
      html.Div(children='''Dash: Second graph.'''),
      dcc.Graph(id='graph2',figure=fig),
   ]),
])

示范

这是在 Dash 中的单个网页上创建多个图形的完整代码 -

import dash
from dash import dcc,html
fromdash.dependenciesimport Input, Output

import pandas as pd
importplotly.expressas px
app = dash.Dash(__name__)
df_bar = pd.DataFrame({
   "Season": ["Summer", "Winter", "Autumn", "Spring"],
   "Rating": [3,2,1,4]
})

fig = px.bar(df_bar, x="Season", y="Rating", barmode="group")
app.layout = html.Div(children=[
   #页面顶部的元素
   html.Div([
      html.H1(children='Dash app1'),
      html.Div(children='''
      Dash: First graph.'''),

      dcc.Graph(
         id='graph1',
         figure=fig
      ),
   ]),
   #页面新“行”中所有元素的新 Div
   html.Div([
      html.H1(children='Dash app2'),
      html.Div(children='''
      Dash: Second graph. '''),

      dcc.Graph(
         id='graph2',
         figure=fig
      ),
   ]),
])

if __name__ == '__main__':
app.run_server(debug=True)

输出结果

当您执行上述程序时，您将在控制台上获得以下输出 -

Dash is running on http://127.0.0.1:8050/
* Serving Flask app 'main'
* Debug mode: on

单击 URL 后，您将被重定向到将显示以下输出的浏览器 -

基础教程