У меня есть эти компоненты ввода и кнопки в моем приложении Dash:
html.Div(
dcc.Input(
id='id_selector',
placeholder='',
type='text',
value=''
)
),
html.Button(
type = 'submit',
id = 'submit-button',
className = 'btn btn-info',
children = [
html.Span('Go!'),
]
)
и эти компоненты:
html.Div(id='output'),
html.Div(
dcc.Graph(id='heatmap_id')
)
Затем я добавляю обратный вызов, как это:
app.callback(
Output(component_id='output', component_property='children'),
[Input('submit-button','n_clicks')],
[State('id_selector', 'value')])
def update_output(n_clicks, input_ID):
print(input_ID)
return html.Div(
"you have selected"+input_ID
,id='output')
Однако, когда я делаю это, обратный вызов выполняется несколько раз, и не только, если я нажимаю на кнопку.
Если я сделал это изменение:
app.callback(
Output('heatmap_id', 'figure'),
[Input('submit-button','n_clicks')],
[State('id_selector', 'value')])
def update_output(n_clicks, input_ID):
print(input_ID)
{HERE I CREATE A THE FIG}
fig = go.Figure(data=data, layout=layout)
return fig
В этом случае все работает нормально, и обратные вызовы выполняются только при нажатии на кнопку.
Почему эта разница?
Причина, по которой я хочу использовать первый вариант (вернуть html.Div вместо рисунка), заключается в том, что при входе в приложение у меня появляется пустой график во втором случае, и я хотел бы иметьсначала пустое место.