在plotly中实现多个链式回调

2024-05-14 11:29:16 发布

您现在位置:Python中文网/ 问答频道 /正文

我已经为下拉菜单实现了两个链式回调,现在我想创建第三个链式下拉菜单,它通过DatePickerage给出日期。因此,在步骤中,首先我们选择“技术”,过滤后的“版本”列表将显示该技术,下一步,我希望DatePickerage使用该版本的最小和最大日期值进行更新

我试着自己做一些事情,但没有成功,我的主要疑问是我找不到填写开始日期、结束日期的方法,我确实需要第三次@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)
    })

数据是巨大的,但如果有人想要一个想法,这里有一张图片: enter image description here


Tags: dividdfdatereleasevaluehtmlproperty

热门问题