首页 > 解决方案 > 在 plotly 中实现多个链式回调

问题描述

我已经为下拉列表实现了 2 个链接回调,现在我想创建第三个链接下拉列表,它通过 DatePickerRange 提供日期。因此,在步骤中,首先我们选择“技术”,为该技术显示“发布”的过滤列表,作为下一步,我希望 DatePickerRange 使用该发布的最小和最大日期值进行更新。

我尝试自己做某事,但它不起作用,我的主要疑问是我找不到填写 start_date、end_date 的方法,我确实需要第三个 @app.callback 但我不知道如何进一步这样做。这是代码:

df = pd.DataFrame(source, columns=
['Technology', 'Release', 'Date', 'Type', 'Version'])

html.Div(
            children=[
                html.Div(
                    children=[
                        html.Div(children='Select Technology:', className="menu-title"),
                        dcc.Dropdown(
                            id='Tech_choice',
                            options=[{'label': x, 'value': x}
                                     for x in df.Technology.unique()],
                            value='A',
                            clearable=False,
                            className="dropdown",

                        ), ]),
                html.Div(
                    children=[
                        html.Div(children="Select Release:", className="menu-title"),
                        dcc.Dropdown(
                            id='release_choice',
                            options=[],
                            clearable=False,
                            className="dropdown",

                        )
                    ]
                ),
                html.Div(
                    children=[
                        html.Div(
                            children="Date Range",
                            className="menu-title"
                        ),
                        dcc.DatePickerRange(
                            id="date-range",
                            min_date_allowed=min(df['Date']),
                            max_date_allowed=max(df['Date']),
                            start_date=min(df['Date']),
                            end_date=max(df['Date']),
                        ),
                    ]

@app.callback(
    Output(component_id='release_choice', component_property='options'),
    Input(component_id='Tech_choice', component_property='value'))
def get_options(Tech_choice):
    dff = df[df.Technology == Tech_choice]
    return [{'label': i, 'value': i} for i in dff['Release'].unique()]


@app.callback(
    Output(component_id='release_choice', component_property='value'),
    Input(component_id='release_choice', component_property='options'))
def get_values(release_choice):
    return [k['value'] for k in release_choice][1]


@app.callback(Output(component_id='my-graph', component_property='figure'),
              [Input(component_id='release_choice', component_property='value')],
              [Input(component_id='date-range', component_property='start_date')],
              [Input(component_id='date-range', component_property='end_date')], )
def interactive_graphs(release_choice, Tech_choice, start_date, end_date):
    print(Tech_choice)
    print(release_choice)
    dff = df[
        (df['SystemRelease'] == release_choice) & (df['Technology'] == Tech_choice) & (df['date1'] >= start_date) & (
                    df['date1'] <= end_date)]
    fig = px.scatter(data_frame=dff, x='Date', y='Release', color="Type", text='Package)
    })

数据很大,但如果有人想要一个想法,这里有一张图片: 在此处输入图像描述

标签: pythonpandasdatepickerplotlyplotly-python

解决方案


推荐阅读