[英]Plotly Dash dropdown menu python
我想添加一个下拉菜单以仅显示一个数字。 我的意思是,如果我是 select 图,破折号必须只显示图,如果我是 select 图 2,则破折号必须显示图 2。这可能吗? 我的代码是一个例子,我有 500 多个无花果。
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px
fig = go.Figure()
fig2 = go.Figure()
fig.add_trace(go.Scatter(y=[4, 2, 1], mode="lines"))
fig2.add_trace(go.Bar(y=[2, 1, 3]))
figs = [fig, fig2]
div = []
for item in figs:
div.append(dcc.Graph(figure=item))
app = dash.Dash()
app.layout = html.Div(div)
"""
add a dropdown to show only one fig
"""
app.run_server(debug=True, use_reloader=False)
对的,这是可能的。
首先,您需要创建包含图形名称/文件名或您希望的标识符的下拉列表,只需为选项参数保留{'label': x, 'value': x}
结构。 label
是您将在下拉列表中看到的内容,并且value
将传递给回调(如下所示)。
fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
dcc.Dropdown(
id='fig_dropdown',
options=[{'label': x, 'value': x} for x in fig_names],
value=None
)])
接下来,您需要一个空白 div(带有id
),其中 plot 将出现:
fig_plot = html.Div(id='fig_plot')
现在创建一个回调。 当id='fig_dropdown'
的输入发生变化时, value
参数将被传递给update_output
function。 这个 function 的 output 将被传递给id='fig_plot'
div 的children
参数。
@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
return name_to_figure(fig_name)
name_to_figure(fig_name)
function 返回一个dcc.Graph()
对象,其中包含您的图形,具体取决于下拉列表的fig_name
值。
完整示例:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px
app = dash.Dash()
fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
dcc.Dropdown(
id='fig_dropdown',
options=[{'label': x, 'value': x} for x in fig_names],
value=None
)])
fig_plot = html.Div(id='fig_plot')
app.layout = html.Div([fig_dropdown, fig_plot])
@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
return name_to_figure(fig_name)
def name_to_figure(fig_name):
figure = go.Figure()
if fig_name == 'fig1':
figure.add_trace(go.Scatter(y=[4, 2, 1]))
elif fig_name == 'fig2':
figure.add_trace(go.Bar(y=[2, 1, 3]))
return dcc.Graph(figure=figure)
app.run_server(debug=True, use_reloader=False)
如果您在下拉框中有很多无花果可供选择,则可能需要对代码进行以下更改才能实现:
@app.callback(Output('fig_plot', 'figure'), [Input('fig_dropdown', 'value')])
def cb(plot_type):
plot_type = plot_type if plot_type else 'fig1'
df_year = head_db.copy()
if plot_type:
return px.bar(df_year, x='Week #', y=str(plot_type), color='Name')
#Libraries/Imports
from dash import Dash, html, dcc, Input, Output
import plotly.graph_objects as go
fig = go.Figure()
fig2 = go.Figure()
fig.add_trace(go.Scatter(y=[4, 2, 1], mode="lines"))
fig2.add_trace(go.Bar(y=2, 1, 3]))
figs = ['fig', 'fig2']
#Your HTML to display the graph
#Disables the multiple dropdown values attributes
app.layout = html.Div([
html.Div(children=[
html.label('Dropdown'),
dcc.Dropdown(id='dropdown', options=(figs), multi=False
html.div(id='show-my-graph')
])
])
#Your callback; is used to display the graph when the dropdown values are selected or updated
@app.callback(
Output(component_id='show-my-graph'), component_property='children'),
Input(component_id='dropdown', component_property='value')
)
#Defines the Function used to display the graph when an option is selected or updated
def update_graph(dropdown_value):
"Returns the appropriate graph component to display when a dropdown is selected or updated"
if(dropdown_value == 'fig'):
ret_val = dcc.Graph(id='scatter-plot-graph', figure=fig)
return ret_val
if (dropdown_value == 'fig2'):
ret_val = dcc.Graph(id='bar-graph', figure=fig2)
return ret_val
app.run_server(debug=True, use_reloader=False)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.