使用 if else 绘制破折号的回调函数

Question

我正在尝试使用两个下拉菜单来实现以下场景：

• 用于选择报告类型的下拉菜单（年度统计数据和经济衰退统计数据） 和下拉菜单以选择年份。仅当用户选择年度统计数据时才希望年份下拉列表处于活动状态，否则不会显示任何年份或选择经济衰退统计数据时。

谢谢您的帮助！

这是正在进行的代码：

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1('Automobile Statistics Dashboard 1980 - 2013',
                style={'textAlign': 'center', 'color': '#503D36','font-size': 24}),
        
        html.Div([html.Label('Select Statistics'),
                  dcc.Dropdown(id='dropdown-statistics',
                               options=[{'label': 'Yearly Statistics', 'value': 'Yearly Statistics'},
                                        {'label': 'Recession Period Statistics', 'value': 'Recession Period Statistics'}],
                               placeholder='Select a Report',
                               style= {'width': '80%',
                                       'padding': '3px',
                                       'font-size': 20,
                                       'text-Align': 'center'})]),
        
        html.Div([html.Label('Select Year'),
                  dcc.Dropdown(id='select-year',
                               options=[{'label': i, 'value': i} for i in year_list],
                               placeholder='1980',
                               style= {'width': '80%',
                                       'padding': '3px',
                                       'font-size': 20,
                                       'text-Align': 'center'})]),
        html.Div(id='output-container',
                 className='chart-grid',
                 style= {'display': 'flex'}),
    ]
) 

# Define the callback function to update the input container based on the selected statistics
@app.callback(
    Output(component_id='select-year', component_property='disabled'),
    Input(component_id='dropdown-statistics',component_property='value'))

def update_input_container(dropdown-statistics):
    if 'dropdown-statistics' =='Yearly Statistics': 
        return False
    else: 
        return True


# Run the Dash app
if __name__ == '__main__':
    app.run_server(debug=True)

坚持定义 update_input_container....

Answer 1

这可行，但它依赖于经济衰退下拉列表，因此年份下拉列表或统计下拉列表中没有任何值。

import dash
from dash import html, dcc, Output, Input, callback, ALL, MATCH

recession_list = ['recession1', 'recession2']
app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1('Automobile Statistics Dashboard 1980 - 2013',
                style={'textAlign': 'center', 'color': '#503D36','font-size': 24}),
        
        html.Div([html.Label('Select Statistics'),
                  dcc.Dropdown(id=dict(type='dropdown', id='statistics-dd'),
                               options=[{'label': 'Yearly Statistics', 'value': 'Yearly Statistics'},
                                        {'label': 'Recession Period Statistics', 'value': 'Recession Period Statistics'}],
                               placeholder='Select a Report',
                               style= {'width': '80%',
                                       'padding': '3px',
                                       'font-size': 20,
                                       'text-Align': 'center'})]),
        
        html.Div([html.Label('Select Year'),
                  dcc.Dropdown(id=dict(type='dropdown', id='year-dd'),
                               options=[{'label': i, 'value': i} for i in [2012, 2013, 2014, 2015]],
                               placeholder='1980',
                               style= {'width': '80%',
                                       'padding': '3px',
                                       'font-size': 20,
                                       'text-Align': 'center'})]),
        
        html.Div([html.Label('Select Recession'),
                  dcc.Dropdown(id=dict(type='dropdown', id='recession-dd'),
                               options=[{'label': i, 'value': i} for i in recession_list],
                               placeholder='Select a recession',
                               style= {'width': '80%',
                                       'padding': '3px',
                                       'font-size': 20,
                                       'text-Align': 'center'})]),
        html.Div(id='output-container',
                 className='chart-grid',
                 style= {'display': 'flex'}),
    ]
) 

# Define the callback function to update the input container based on the selected statistics
@app.callback(
    Output(dict(type='dropdown', id='year-dd'), component_property='disabled'),
    Input(dict(type='dropdown', id='recession-dd'), component_property='value'))

def update_input_container(selected_value):
    return selected_value in recession_list



# Run the Dash app
if __name__ == '__main__':
    app.run_server(debug=True)

我建议做点别的事情，虽然有点复杂。将下拉列表相互嵌套或将它们嵌套在手风琴中。查看此页面以获取想法：https://community.plotly.com/t/how-to-do-a-multi-level-dropdowns/34967/6