Есть ли способ обновить два раздела, используя один параметр раскрывающегося списка в Python Dash от Plotly

В следующем коде, который генерирует простой график на основе опции, выбранной из выпадающего меню.

Есть ли способ добавить еще один раздел под графиком, который также обновляется в соответствии с "параметром", выбранным в раскрывающемся меню. Пример - для отдельной опции "Option_A", построить график и отобразить журналы изменений для "Option_A".

app = dash.Dash()

app.layout = html.Div([
    html.H1('XYZ_Header', className='banner'),
    html.Div([
        html.P('abc_paragraph')
    ]),

    html.Div([
        html.P("X Data"),
        dcc.Dropdown(id='start_time',
            options=[
                {'label': 'xxx_1', 'value':'x_1'},
                {'label': 'xxx_2', 'value': 'x_2'}
            ],
            value='x_1')
        ], style={'width': '40%', 'margin-left': '3%', 'display': 'inline-block'}),

    html.Div([
        html.P("Y Data"),
        dcc.Dropdown(id='end_time', options=[
                {'label': 'yyy_1', 'value':'y_1'},
                {'label': 'yyy_2', 'value': 'y_2'}
            ],
            value='today')
        ], style={'width': '31%', 'margin-left': '3%', 'display': 'inline-block'}),

    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'AAA', 'value': 'Option_A'},
            {'label': 'BBB', 'value': 'Option_B'},
            {'label': 'CCC', 'value': 'Option_C'}
        ],
        value='Option_A'
    ),
    dcc.Graph(id='my-graph')
])

@app.callback(
    Output(component_id='my-graph', component_property='figure'),
    [
        Input(component_id='my-dropdown', component_property='value'),
        Input(component_id='start_time', component_property='value'),
        Input(component_id='end_time', component_property='value')
    ]
    )
def update_graph(selected_dropdown_value, start_time, end_time):
    .
    .
    .
    df = pdr.get_data(selected_dropdown_value, start_time, end_time)
    return {
        'data': [{
            'x': df.index,
            'y': df.Close
        }]
    }


if __name__ == '__main__':
    app.run_server(host='127.0.0.1', port=8888)

Вывод будет выглядеть примерно так:

---------------------------------- Output ---------------------------

XYZ_Header
abc_paragraph

<
.
dropdown menu is displayed here
.
>

<
.
.
.
graph is displayed/updated as per the 'option' selected in the dropdown menu
.
.
.
.
>

# My question : 
#   The way I'm updating the graph for each selected 'option', 
#     Is there a way I can update text (using some other APIs) as well?
#     Can someone please share an example ?


---------------------------------------------------------------------

1 ответ

Я наткнулся на одно решение. Если вы можете придумать лучшее решение, пожалуйста, прокомментируйте -

создал еще один обратный вызов, и для этого обратного вызова был получен вывод:

app.layout = html.Div([
    .
    .
    .
    # This is same as before. Just added the following :
    .
    .
    .

    html.Div(id='update_text')
])

@app.callback(
    dash.dependencies.Output('update_text', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')]
    )
def update_news(selected_dropdown_value):
    return 'You\'ve selected "{}"'.format(selected_dropdown_value)
Другие вопросы по тегам