一個回調中的兩個日期選擇器 Dash Plotly Python

Question

我正在嘗試在一個回調中設置 2 個日期選擇器，其目的是創建一個 plot 具有兩個數據框，其中一個對應於帶有第一個下拉列表的過濾器，第二個對應於第二個日期過濾器的輸入。

我有以下代碼：（我只是要放一部分代碼，因為它很大）

cluster = dbc.Form([
        dbc.FormGroup([
                dbc.Label('Dasboard Visión de Negocios (COVID-19)', html_for="dropdown",style={'font-family': 'arial','font-size': '2rem'}),
                dbc.Row([
# =============================================================================
#                     # Fila de dropdowns
# =============================================================================
                        dbc.Col([
                                #####  TIME PERIOD
                                dbc.Label('Periodo:', html_for="dropdown",style={'padding-top': '80px','font-family': 'arial','font-size': '1.1rem'}),
                                dcc.DatePickerRange(id='periodo_sel',
                                                    display_format='DD MMM YYYY',
                                                    minimum_nights=1,
                                                    start_date=dt(2019,1,1),
                                                    end_date=df['EFFECTIVE_START_DATE'].max(),
                                                    style={'width': 'max-content','font-family': 'arial'},
                                                    day_size = 30),
                                ##### SECOND TIME PERIOD
                                dbc.Label('Periodo 2:', html_for="dropdown",style={'padding-top': '80px','font-family': 'arial','font-size': '1.3rem'}),
                                dcc.DatePickerRange(id='periodo_sel2',
                                                    display_format='DD MMM YYYY',
                                                    minimum_nights=1,
                                                    start_date=dt(2019,1,1),
                                                    end_date=df['EFFECTIVE_START_DATE'].max(),
                                                    style={'width': 'max-content','font-family': 'arial'},
                                                    day_size = 30),
......      

這是我試圖創建 plot 的地方：

@app.callback(Output(component_id='product_graph', component_property='figure'),
              [Input('periodo_sel','start_date'),
               Input('periodo_sel','end_date'),
               Input('periodo_sel2','start_date'),
               Input('periodo_sel2','end_date'),
               Input('periodo_sel','end_date'),
               Input('temp_select','value'),
               Input('product_select','value')])

def product_plot(start_date, end_date, temp_select, product_select):
    """
    Here is where the problem begins, because I don't know how to set a "start2" and "end2", if          you see, period has only start and end as property, so when I'm trying to set the second period it becomes redundant and takes the input of the first output
    """
    start = pd.to_datetime(start_date)
    end = pd.to_datetime(end_date)
    
    start2 = pd.to_datetime(?????)
    end2 = pd.to_datetime(?????)
    

....

Answer 1

我剛剛解決了這個問題，我得到了它的工作。

您需要在每個日期選擇器上使用 id 才能在回調中使用其值。 就這樣。 看看下面的代碼：

在儀表板上 session：

dcc.DatePickerSingle(
    id='date_start',
    date=dt.today(),
    ),
dcc.DatePickerSingle(
    id='date_end',
    date=dt.today(),
    ),
dcc.Graph(id='my_plot')

在回調 session 上：

@application.callback(
    Output('my_plot', 'figure'),
    [
        Input('date_start', 'date'),
        Input('date_end', 'date'),
    ]
)
def make_plot_callback(date_start, date_end):
    print(date_start, date_end)
    fig = make_plot(date_start, date_end) # define this for creating yr plot

    return fig