используя Dash, есть ли способ повторить один и тот же компонент id в двух разделах на странице?

#python #plotly #plotly-dash

#python #сюжет #plotly-dash

Вопрос:

Я использую библиотеку DASH и пытаюсь использовать два выпадающих фильтра с одинаковым идентификатором, чтобы я мог фильтровать в любом из обоих, и он вызывает один и тот же обратный вызов, и если я изменю один, другой также нужно изменить. Но я не знаю, как это сделать.

Спасибо.

Ответ №1:

Идентификаторы должны быть уникальными. Повторяющиеся идентификаторы в макете запрещены (если вы используете последнюю версию Dash). Dash выдаст исключение, если у вас есть повторяющиеся идентификаторы в макете.

Вместо этого вы должны присвоить обоим выпадающим спискам уникальный идентификатор и включить оба компонента в свой обратный вызов по их идентификаторам.

Если вы хотите изменить раскрывающееся значение одного раскрывающегося списка при изменении другого раскрывающегося списка, вы можете использовать dash.callback_context :

 import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown1",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montreal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="NYC",
        ),
        dcc.Dropdown(
            id="dropdown2",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montreal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="NYC",
        ),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("dropdown1", "value"),
    Output("dropdown2", "value"),
    Input("dropdown1", "value"),
    Input("dropdown2", "value"),
    prevent_initial_call=True
)
def update_output(dropdown1_value, dropdown2_value):
    ctx = dash.callback_context
    dropdown_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if dropdown_id == "dropdown1":
        dropdown_values = dropdown1_value, dropdown1_value
    elif dropdown_id == "dropdown2":
        dropdown_values = dropdown2_value, dropdown2_value

    return  dropdown_values


if __name__ == "__main__":
    app.run_server()
  

Если value свойство dropdown1 изменяет, запускается обратный вызов, а value свойство dropdown2 изменяет значение dropdown1 и наоборот.

prevent_initial_callback установлено True значение, поэтому мне не нужно проверять dash.callback_context.triggered , нет ли None его. Возможно, вы захотите изменить это в зависимости от ваших потребностей.

в выпадающих списках синхронизации