Bagaimana cara menambahkan beberapa grafik ke aplikasi Dash pada satu halaman browser?
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
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.Div
komponen bersarang . Untuk setiap gambar dan judul yang sesuai, teks, dll. Kami membuat yang lain html.Div
yang 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.Graph
objek 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 className
komponen 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.Div
sebagai 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)
