如何制作 Dash 下拉选项取决于另一个 DCC 输入选择

Posted 2023-03-22

【中文标题】如何制作 Dash 下拉选项取决于另一个 DCC 输入选择

【英文标题】：How to make Dash dropdown options depend upon another DCC inputs selection

【发布时间】：2021-11-21 11:09:53

【问题描述】：

假设我有一些代码如下：

import pandas as pd
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import helper
from datetime import date



app = dash.Dash(__name__)


# import data

app.layout = html.Div(children=[

    dcc.Dropdown(
        id='slct_dataset',
        options= ['dataset1', 'dataset2'],
        placeholder="Select a dataset",
        multi=False,
        style='width': '40%'
                 ),

    dcc.DatePickerRange(
        id='slct_date',
        #todo make: below below depend upon dataset selection
        min_date_allowed=date(1980, 1, 1),
        max_date_allowed=date(2021, 1, 1),
        initial_visible_month=date(2017, 8, 5),
        end_date=date(2017, 8, 25)

    ),


    html.Div(id='output_container', children=[], style=
        'textAlign': 'center'
    ),
    html.Br(),

    dcc.Graph(id='my_graph', figure=)

])

#callback to produce graph
@app.callback(
    [
        Output(component_id='output_container', component_property='children'),
        Output(component_id='my_series_graph', component_property='figure')
    ],
    [
        Input(component_id='slct_dataset', component_property='value'),
        Input(component_id='slct_date', component_property='start_date'),
        Input(component_id='slct_date', component_property='end_date')
    ]
)

def update_graph(dataset_slctd, start_date_slctd, end_date_slctd):
    
    container = 'Dataset: '.format(dataset_slctd) +\
                '. Start date: '.format(start_date_slctd) + \
                '. End date: '.format(end_date_slctd) 


    dff = helper.get_dataset(dataset_slctd, start_date_slctd, end_date_slctd)

    dff['Datetime'] = dff.index
    fig = px.line(dff, x='Datetime', y='Value', title=dataset_slctd)

    return container, fig


if __name__ == '__main__':
    app.run_server(debug=False)

现在我有允许硬编码的最小和最大日期 min_date_allowed=date(1980, 1, 1) 在日期选择器范围内。如何根据在第一个下拉列表中选择的数据集动态定义日期范围？例如。假设我有 01-01-2000/01-01-2001 作为数据集 1 的最小/最大数据集，并且我有 02-02-2000/02-02-2001 作为数据集2 的最小/最大日期范围。如何根据我在 slct_dataset 下拉列表中选择 dataset1 还是 dataset2 来动态更新 datepickerrange？据我了解，这可能取决于使用回调，但我无法真正找到执行此操作的标准方法。让我知道是否有更多信息可以使问题更清楚 - 我基本上采用了我实际编写的代码并尽可能简化它，所以希望它清楚我在这里想要做什么。感谢您的帮助。

【参考方案1】：

您可以将下拉列表作为回调的输入，并根据所选值输出到日期选择器的日期范围。签名应如下所示：

@app.callback(
    [
        Output(component_id='slct_date', component_property='min_date_allowed'),
        Output(component_id='slct_date', component_property='max_date_allowed'),
    ],
    [
        Input(component_id='slct_dataset', component_property='value'),
    ]
)

【讨论】：

太棒了，非常感谢您的简洁而正确的回答！

很高兴为您提供帮助。还请考虑通过单击检查将此答案标记为“已接受”。