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

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依赖关系。

from dash.dependencies import Input, Output

步骤4

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

import plotly.express as px

步骤5

使用Pandas模块生成数据集

import pandas as pd
df_bar = pd.DataFrame({
   "Season": ["夏天", "冬天", "秋天", "春天"],
   "评分": [3,2,1,4]
})

步骤6

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

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

步骤7

创建 main 函数以使用以下命令运行应用程序服务器 −

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

步骤8

在两个“div”部分中生成两个不同的HTML子元素的应用程序布局。

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

   # 新Div中的所有元素，用于页面新的 'row'
   html.Div([
      html.H1(children='Dash app2'),
      html.Div(children='''Dash: 第二个图。'''),
      dcc.Graph(id='graph2',figure=fig),
   ]),
])

示例

以下是创建Dash中单个Web页面上的多个图形的完整代码 −

导入dash
从dash中导入 dcc, html
从dash的依赖中导入 Input, Output

导入 pandas作为 pd
导入 plotly的 express作为 px
app = dash的Dash函数（名称）
df_bar = pd的DataFrame函数（{
   "Season": ["夏季", "冬季", "秋季", "春季"],
   "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：第一个图表。'''）,

      dcc的Graph函数（
         id='graph1',
         figure=fig
      ）,
   ]）,
   #页面新“行”中的所有元素的新


   html的Div函数（[
      html的H1函数（children='Dash app2'）,
      html的Div函数（children='''
      Dash：第二个图表。'''）,

      dcc的Graph函数（
         id='graph2',
         figure=fig
      ）,
   ]）,
]）

如果 __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后，您将被重定向到浏览器，该浏览器将显示以下输出−