Bagaimana cara menambahkan beberapa grafik ke aplikasi Dash pada satu halaman browser?

Aug 18 2020

masukkan deskripsi gambar di sini

Bagaimana cara menambahkan beberapa grafik yang ditampilkan dalam gambar di halaman yang sama? Saya mencoba menambahkan komponen html.Div ke kode berikut untuk memperbarui tata letak halaman untuk menambahkan lebih banyak grafik seperti itu pada satu halaman, tetapi grafik yang baru ditambahkan ini tidak ditampilkan pada halaman, hanya grafik lama yang ditampilkan dalam gambar yang terlihat. Elemen apa yang harus saya modifikasi, katakanlah menambahkan grafik yang ditampilkan pada gambar yang diupload 3 kali pada satu halaman aplikasi dasbor di browser?


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)

Jawaban

16 KristianHaga Aug 18 2020 at 14:57

Untuk menambahkan angka yang sama beberapa kali, Anda hanya perlu memperpanjang app.layout. Saya telah memperpanjang kode Anda di bawah ini sebagai contoh.

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)

Cara saya menyusun tata letak adalah dengan membuat html.Divkomponen bersarang . Untuk setiap gambar dan judul yang sesuai, teks, dll. Kami membuat yang lain html.Divyang membuat 'baris' baru dalam aplikasi kami.

Satu hal yang perlu diingat adalah bahwa komponen yang berbeda memerlukan id unik . Dalam contoh ini kami memiliki grafik yang sama yang ditampilkan dua kali, tetapi mereka bukan objek yang sama persis. Kami membuat dua dcc.Graphobjek menggunakan gambar plotly.express yang sama

Saya telah membuat contoh lain untuk Anda di mana saya menambahkan sosok lain yang dinamis . Gambar kedua diperbarui setiap kali skala warna baru dipilih dari menu tarik-turun. Inilah potensi sebenarnya dari kebohongan Dash. Anda dapat membaca lebih lanjut tentang fungsi panggilan balik dalam tutorial ini

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)

Pertanyaan Anda selanjutnya mungkin, bagaimana cara menempatkan banyak gambar secara berdampingan? Di sinilah CSS dan stylesheet penting.

Anda telah menambahkan stylesheet eksternal https://codepen.io/chriddyp/pen/bWLwgP.css, yang memungkinkan kita menyusun tata letak kita dengan lebih baik menggunakan classNamekomponen div.

Lebar halaman web diatur menjadi 12 kolom, berapa pun ukuran layarnya. Jadi jika kita ingin dua gambar berdampingan, masing-masing menempati 50% layar, mereka harus mengisi 6 kolom masing-masing.

Kita dapat mencapai ini dengan menyarangkan yang lain html.Divsebagai baris tengah atas kita. Di div atas ini kita dapat memiliki dua div lain di mana kita menentukan gayanya sesuai dengan nama kelas six columns. Ini membagi baris pertama menjadi dua bagian

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)