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

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

enter image description here

如何添加多个图形显示在同一页面上的图片？我正在尝试将html.Div组件添加到以下代码中，以更新页面布局，以在单个页面上添加更多图形，但是这些新添加的图形不会显示在页面上，只有旧图形显示在图片中才可见。我应该修改什么元素，比如说要在浏览器上的仪表板应用程序的单个页面上将上传的图片中显示的图形添加3次？

import dash
import dash_core_components as dcc
import dash_html_components as html
i[enter image description here][1]mport plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__,external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples","Oranges","Bananas","Apples","Bananas"],"Amount": [4,1,2,4,5],"City": ["SF","SF","Montreal","Montreal"]
})

fig = px.bar(df,x="Fruit",y="Amount",color="City",barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),html.Div(children='''
        Dash: A web application framework for Python.
    '''),dcc.Graph(
        id='example-graph',figure=fig
    )
])

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

解决方法

要多次添加相同的图形，只需扩展app.layout。我以下面的代码为例对您进行了扩展。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output
import pandas as pd
import plotly.express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__,external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
    "Fruit": ["Apples","Oranges","Bananas","Apples","Bananas"],"Amount": [4,1,2,4,5],"City": ["SF","SF","Montreal","Montreal"]
})

fig = px.bar(df_bar,x="Fruit",y="Amount",color="City",barmode="group")

app.layout = html.Div(children=[
    # All elements from the top of the page
    html.Div([
        html.H1(children='Hello Dash'),html.Div(children='''
            Dash: A web application framework for Python.
        '''),dcc.Graph(
            id='graph1',figure=fig
        ),]),# New Div for all elements in the new 'row' of the page
    html.Div([
        html.H1(children='Hello Dash'),dcc.Graph(
            id='graph2',])

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

我布局布局的方法是嵌套html.Div组件。对于每个图形和相应的标题，文本等，我们创建另一个html.Div，在我们的应用程序中创建一个新的“行”。

要记住的一件事是，不同的组件需要唯一的ID 。在此示例中，相同的图形显示了两次，但它们并非完全相同的对象。我们使用相同的plotly.express图制作两个dcc.Graph对象

我为您提供了另一个示例，其中我添加了另一个动态图。每当从下拉菜单中选择新的色标时，第二个图形就会更新。这是达世币真正的潜力所在。您可以在此tutorial

中了解有关回调函数的更多信息

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,barmode="group")

# Data for the tip-graph
df_tip = px.data.tips()

app.layout = html.Div(children=[
    # All elements from the top of the page
    html.Div([
        html.H1(children='Hello Dash'),dcc.Graph(
            id='example-graph',# New Div for all elements in the new 'row' of the page
    html.Div([ 
        dcc.Graph(id='tip-graph'),html.Label([
            "colorscale",dcc.Dropdown(
                id='colorscale-dropdown',clearable=False,value='bluyl',options=[
                    {'label': c,'value': c}
                    for c in px.colors.named_colorscales()
                ])
        ]),])
])

# Callback function that automatically updates the tip-graph based on chosen colorscale
@app.callback(
    Output('tip-graph','figure'),[Input("colorscale-dropdown","value")]
)
def update_tip_figure(colorscale):
    return px.scatter(
        df_color,x="total_bill",y="tip",color="size",color_continuous_scale=colorscale,render_mode="webgl",title="Tips"
    )

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

您的下一个问题可能是，如何并排放置多个图形？ 这是CSS和样式表很重要的地方。

您已经添加了外部样式表https://codepen.io/chriddyp/pen/bWLwgP.css，使我们能够使用div的className组件更好地布局布局。

无论屏幕大小如何，网页的宽度均设置为12列。因此，如果我们要并排放置两个图形，每个图形要占据屏幕的50％，那么每个图形都需要填充6列。

我们可以通过嵌套另一个html.Div作为上半行来实现。在上一个div中，我们可以有另外两个div，其中我们根据类名six columns指定样式。这会将第一行分为两半

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output
import pandas as pd
import plotly.express as px
from jupyter_dash import JupyterDash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__,barmode="group")

app.layout = html.Div(children=[
    # All elements from the top of the page
    html.Div([
        html.Div([
            html.H1(children='Hello Dash'),html.Div(children='''
                Dash: A web application framework for Python.
            '''),dcc.Graph(
                id='graph1',figure=fig
            ),],className='six columns'),html.Div([
            html.H1(children='Hello Dash'),dcc.Graph(
                id='graph2',className='row'),dcc.Graph(
            id='graph3',])

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