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

Python 如何在Plotly的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核心组件, dcchtml

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": ["Summer", "Winter", "Autumn", "Spring"],
   "Rating": [3,2,1,4]
})

步骤6

使用以下数值生成一个柱状图,并将其存储在”fig”变量中。

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

步骤7

使用以下命令创建 main 函数以运行App服务器

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

步骤8

在两个“div”区域中生成两个不同HTML子元素的应用布局。

app.layout = html.Div(children=[
   # elements from the top of the page
   html.Div([html.H1(children='Dash app1'),
   html.Div(children='''Dash: First graph.'''),
   dcc.Graph(id='graph1',figure=fig),]),

   # New Div for all elements in the new 'row' of the page
   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
from dash.dependencies import Input, Output

import pandas as pd
import plotly.express as 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=[
   # elements from the top of the page
   html.Div([
      html.H1(children='Dash app1'),
      html.Div(children='''
      Dash: First graph.'''),

      dcc.Graph(
         id='graph1',
         figure=fig
      ),
   ]),
   # New Div for all elements in the new 'row' of the page
   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时,您将被重定向到浏览器,该浏览器将显示以下输出−

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

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程