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

Question

假设我有一些代码如下：

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) 在日期选择器范围内。如何根据第一个下拉列表中数据集的 selection 动态定义日期范围？例如。假设我有 01-01-2000/01-01-2001 作为数据集 1 的 min/max 数据集，我有 02-02-2000/02-02-2001 作为数据集 2 的 min/max 日期范围.如何根据我的 slct_dataset 下拉列表中的 select dataset1 或 dataset2 动态更新我的 datepickerrange？据我了解，这可能取决于使用回调，但我无法真正找到执行此操作的标准方法。让我知道是否有更多信息可以使问题更清楚 - 我基本上采用了我实际编写的代码并尽可能简化它，所以希望它清楚我在这里试图做什么。感谢您的帮助。

Answer 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'),
    ]
)

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

How to make Dash dropdown options depend upon another DCC inputs selection

python

dashboard

plotly

plotly-dash

plotly-python