Come aggiungere più grafici all'app Dash su una singola pagina del browser?
inserire la descrizione dell'immagine qui
Come posso aggiungere più grafici mostrati nell'immagine su una stessa pagina? Sto cercando di aggiungere componenti html.Div al seguente codice per aggiornare il layout della pagina per aggiungere più grafici come quello su una singola pagina, ma questi grafici appena aggiunti non vengono mostrati su una pagina, solo il vecchio grafico è mostrato nell'immagine è visibile. Quale elemento dovrei modificare, diciamo per aggiungere il grafico mostrato nell'immagine caricata 3 volte su una singola pagina dell'app dash sul 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)
Risposte
Per aggiungere la stessa cifra più volte, devi solo estendere il tuo file app.layout. Ho esteso il codice di seguito come esempio.
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)
Il modo in cui ho strutturato il layout è annidando i html.Divcomponenti. Per ogni figura e corrispondenti titoli, testo, ecc. ne creiamo un'altra html.Divche crea una nuova 'riga' nella nostra applicazione.
L'unica cosa da tenere a mente è che diversi componenti necessitano di ID univoci . In questo esempio abbiamo lo stesso grafico visualizzato due volte, ma non sono esattamente lo stesso oggetto. Stiamo realizzando due dcc.Graphoggetti utilizzando la stessa figura plotly.express
Ho fatto un altro esempio per te in cui ho aggiunto un'altra figura che è dinamica . La seconda cifra viene aggiornata ogni volta che viene selezionata una nuova scala di colori dal menu a discesa. Questo è il vero potenziale delle bugie di Dash. Puoi leggere ulteriori informazioni sulle funzioni di callback in questo tutorial
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)
La tua prossima domanda potrebbe essere, come posso posizionare più figure una accanto all'altra? È qui che CSS e fogli di stile sono importanti.
Hai già aggiunto un foglio di stile esterno https://codepen.io/chriddyp/pen/bWLwgP.css, che ci permette di strutturare meglio il nostro layout utilizzando il classNamecomponente div.
La larghezza di una pagina Web è impostata su 12 colonne, indipendentemente dalle dimensioni dello schermo. Quindi, se vogliamo avere due figure affiancate, ciascuna che occupa il 50% dello schermo, devono riempire 6 colonne ciascuna.
Possiamo raggiungere questo obiettivo nidificando un altro html.Divcome la nostra metà riga superiore. In questo div superiore possiamo avere altri due div in cui specifichiamo lo stile in base a classname six columns. Questo divide la prima riga in due metà
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)
