[解決済み] Plotly Dash ドロップダウンメニュー python

質問

ドロップダウンメニューを追加して、図を1つだけ表示させたいのですが。つまり、figを選択するとダッシュでfigのみが表示され、fig2を選択するとダッシュでfig2が表示されるようにしたいのです。可能でしょうか？ 私のコードは一例で、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 ) にプロットを表示します。

fig_plot = html.Div(id='fig_plot')

次にコールバックを作成します。を持つ入力があった場合 id='fig_dropdown' が変更されると value パラメータに渡されます。 update_output 関数を使用します。この関数の出力が children のパラメータを指定します。 id='fig_plot' div.

@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) 関数は 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)