添加基于 RadioItems 的下拉列表

Question

这段代码工作正常。我可以根据 RadioItem 更新图形。现在我的破折号中没有下拉菜单，但我想总共添加 4 个下拉菜单。其中 2 个应该用于第一个 RadioItem，另外 2 个应该用于另一个 RadioItem。换句话说，我将在添加下拉菜单时第二次更新我的图表。我找不到这种情况的示例代码。这是我的代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots

pp_list=['pp1', 'pp2', 'pp3', 'pp4', 'pp5', 'pp6', 'pp7', 'pp8']
group_list=['gr1', 'gr2', 'gr3', 'gr4', 'gr5', 'gr6', 'gr7', 'gr8']

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Markdown('''**Choose to Compare:**'''),
    dcc.RadioItems(
        id='radio',
        value='pp_basis',
        options=[{'label': x, 'value': x}
                 for x in ['pp_basis', 'group_basis']]
    ),

    dcc.Graph(id="graph"),

])

@app.callback(
    Output("graph", "figure"),
    [Input("radio", "value")])
def display_(radio_value):

   
    fig = make_subplots(specs=[[{"secondary_y": True}]])

    if radio_value == 'pp_basis':
        
        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[2.1, 1.8, 1.3], name="pp1"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[1.9, 1.5, 0.8], name="pp2"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
            secondary_y=True,
        )

    else:
        fig.add_trace(
            go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.5, 1.3, 1.38], name="gr1"),
        )

        fig.add_trace(
            go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.3, 1.1, 1.18], name="gr2"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
            secondary_y=True,
        )

    
    fig.update_layout(
        title_text="Cost Analysis"
    )

   
    fig.update_xaxes(title_text="<b>Date</b>")

    
    if radio_value == 'pp_basis':
        fig.update_yaxes(
            title_text="<b>Cost</b>",
            )
    else:
        fig.update_yaxes(
            title_text="<b>WACC</b>",
        )

    fig.update_yaxes(
        title_text="<b>Secondary Axis</b>",
        secondary_y=True)

    return fig

app.run_server(debug=True)

我在代码中添加了两个列表，它们是 pp_list 和 group_list。我要设计的结果如下：

我该怎么做？

Answer 1

我对您的代码进行了以下更改：

在应用布局中创建了一个下拉项
使用这个新的下拉列表 options/values 作为输出和单选项值作为输入创建了一个回调
调整图形创建器回调以使用下拉值作为输入

现在，根据单选项目的选择，刷新下拉选项。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots

pp_list=['pp1', 'pp2', 'pp3', 'pp4', 'pp5', 'pp6', 'pp7', 'pp8']
group_list=['gr1', 'gr2', 'gr3', 'gr4', 'gr5', 'gr6', 'gr7', 'gr8']

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Markdown('''**Choose to Compare:**'''),
    dcc.RadioItems(
        id='radio',
        value='pp_basis',
        options=[{'label': x, 'value': x}
                 for x in ['pp_basis', 'group_basis']]
    ),
    
    dcc.Dropdown(id= 'dropdown'),

    dcc.Graph(id="graph"),

])

@app.callback(
    [Output('dropdown', 'options'),
     Output('dropdown', 'value')],
    Input('radio', 'value'))

def dropdown_options(radio_value):
    
    if radio_value == 'pp_basis':
        options = [{'label': x, 'value': x} for x in pp_list]
        value = pp_list[0]
    else:
        options = [{'label': x, 'value': x} for x in group_list]
        value = group_list[0]
    
    return options, value
    
@app.callback(
    Output("graph", "figure"),
    [Input("dropdown", "value")])

#here you will define what the graph should look like based on the dropdown
def display_(dropdown_value):

    fig = make_subplots(specs=[[{"secondary_y": True}]])

    if dropdown_value.startswith('pp'):
        
        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[2.1, 1.8, 1.3], name="pp1"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[1.9, 1.5, 0.8], name="pp2"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
            secondary_y=True,
        )

    else:
        fig.add_trace(
            go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.5, 1.3, 1.38], name="gr1"),
        )

        fig.add_trace(
            go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.3, 1.1, 1.18], name="gr2"),
        )

        fig.add_trace(
            go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
            secondary_y=True,
        )

    
    fig.update_layout(
        title_text="Cost Analysis"
    )

   
    fig.update_xaxes(title_text="<b>Date</b>")

    
    if dropdown_value.startswith('pp'):
        fig.update_yaxes(
            title_text="<b>Cost</b>",
            )
    else:
        fig.update_yaxes(
            title_text="<b>WACC</b>",
        )

    fig.update_yaxes(
        title_text="<b>Secondary Axis</b>",
        secondary_y=True)

    return fig

app.run_server(debug=True, port=5050, host='0.0.0.0')

添加基于 RadioItems 的下拉列表

Adding a drop down list based on RadioItems

python

plotly-dash