จะเพิ่มกราฟหลายรายการในแอพ Dash บนหน้าเบราว์เซอร์เดียวได้อย่างไร?

Question

ป้อนคำอธิบายภาพที่นี่

ฉันจะเพิ่มกราฟหลายรายการที่แสดงเป็นรูปภาพในหน้าเดียวกันได้อย่างไร? ฉันกำลังพยายามเพิ่มส่วนประกอบ html.Div ลงในโค้ดต่อไปนี้เพื่ออัปเดตเค้าโครงหน้าเพื่อเพิ่มกราฟแบบนั้นในหน้าเดียว แต่กราฟที่เพิ่มเข้ามาใหม่เหล่านี้ไม่แสดงบนหน้ามีเพียงกราฟเก่าเท่านั้นที่แสดงในรูปภาพเท่านั้นที่สามารถมองเห็นได้ ฉันควรแก้ไของค์ประกอบใดสมมติว่าจะเพิ่มกราฟที่แสดงในรูปภาพที่อัปโหลด 3 ครั้งในหน้าเดียวของแอพ dash บนเบราว์เซอร์

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", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "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)

Answer 1

ในการเพิ่มรูปเดียวกันหลาย ๆ ครั้งคุณเพียงแค่ต้องขยาย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", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "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'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

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

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

วิธีที่ฉันจัดโครงสร้างเค้าโครงคือการซ้อนhtml.Divส่วนประกอบ สำหรับทุกรูปและชื่อเรื่องข้อความและอื่น ๆ ที่เกี่ยวข้องเราสร้างอีกอันhtml.Divที่สร้าง 'แถว' ใหม่ในแอปพลิเคชันของเรา

สิ่งหนึ่งที่จะเก็บไว้ในใจก็คือว่าองค์ประกอบที่แตกต่างกันต้องรหัสที่ไม่ซ้ำกัน ในตัวอย่างนี้เรามีกราฟเดียวกันแสดงสองครั้ง แต่ไม่ใช่วัตถุเดียวกัน เรากำลังสร้างdcc.Graphวัตถุสองชิ้นโดยใช้พล็อตเดียวกันนิพจน์

ผมได้ทำอีกตัวอย่างหนึ่งสำหรับคุณที่ฉันมีเพิ่มรูปอื่นที่เป็นแบบไดนามิก รูปที่สองจะได้รับการอัปเดตทุกครั้งที่มีการเลือกระดับสีใหม่จากเมนูแบบเลื่อนลง นี่คือศักยภาพที่แท้จริงของ Dash โกหก คุณสามารถอ่านเพิ่มเติมเกี่ยวกับฟังก์ชันการโทรกลับได้ในบทช่วยสอนนี้

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", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", 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'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='example-graph',
            figure=fig
        ),  
    ]),
    # 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แล้วซึ่งทำให้เราสามารถจัดโครงสร้างเลย์เอาต์ของเราได้ดีขึ้นโดยใช้classNameส่วนประกอบของ div

ความกว้างของหน้าเว็บกำหนดไว้ที่ 12 คอลัมน์ไม่ว่าขนาดหน้าจอจะเป็นอย่างไร ดังนั้นหากเราต้องการให้มีตัวเลขสองตัวอยู่เคียงข้างกันแต่ละคนครอบครอง 50% ของหน้าจอพวกเขาต้องเติม 6 คอลัมน์แต่ละคอลัมน์

เราสามารถบรรลุสิ่งนี้ได้โดยวางอีกhtml.Divอันหนึ่งเป็นแถวครึ่งบนของเรา ใน div บนนี้เราสามารถมีอีกสอง divs ที่เราระบุรูปแบบตาม six columnsClassName ซึ่งจะแบ่งแถวแรกออกเป็นสองส่วน

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__, 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", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "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.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'),

            html.Div(children='''
                Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph2',
                figure=fig
            ),  
        ], className='six columns'),
    ], className='row'),
    # New Div for all elements in the new 'row' of the page
    html.Div([
        html.H1(children='Hello Dash'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph3',
            figure=fig
        ),  
    ], className='row'),
])

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