破折号 plotly 在计算之间更新 label

Question

我是 dash plotly 的新手，并将其用于我的一些个人项目。 现在我有一个很长的计算运行，我需要更新一些状态栏，如 label 与计算进度。 像这样的东西

app.layout = html.Div([
    html.Div([
        html.Button("Start calculation",n_clicks=0,id="btn")
        html.Label('Calculation 1 complete', style={'display':"none"}, id='cal1'),
        html.Label('Calculation 2 complete', style={'display':"none"}, id='cal1'),
        html.Label('Calculation 3 complete', style={'display':"none"}, id='cal1'),
])
])


@app.callback(
    [Output('cal1', 'style'),
    Output('cal2', 'style'),
    Output('cal3', 'style')],
    [Input('btn', 'n_clicks')])
def calculation():
    # long calulation 1
    #> make label id cal1 visible

    # long calulation 2
    #> make label id cal2 visible

    # long calulation 3
    #> make label id cal3 visible

    # calculation complete

但我不知道如何实现这一点。 我只能拥有具有特定输入的回调，该输入启动 function 并在 function 结束时更新一些特定的 output。 与纯 javascript 不同，我不能随时在 function 中更新一些 html。 谁能帮我解决这个问题

Answer 1

Try wrapping the html.Label in an html.Div and pass style={'display':'none'} inside that div, not in the html.Label .

然后要使 label 显示，请在每次计算完成后通过返回 {} 删除style={'display':'none'} 。