需要有关带有输入、输出、按钮、图形的 plotly dash python 回调的帮助

Question

我是 plotly dash python 的新手。在输入值并单击“设置”按钮后，我需要帮助更新图表。我尝试了很多方法，但我无法使它正确。此外，刷新按钮用于将图形刷新回 0 输入值。我被困在这里了。我必须在输入后更新图表还是只更新值？

from dash import html, Dash, dcc, Input, Output, State
import plotly.express as px
import pandas as pd



app = Dash(__name__)



df = pd.DataFrame({
    "Minimum/Maximum":["Minimum", "Maximum"],
    "Numbers of Beat": [2,60]
    })
fig = px.bar(df, x = "Minimum/Maximum", y = "Numbers of Beat", color="Minimum/Maximum")

app.layout = html.Div(
    children=[
    html.H1(children= 'HTML Dashboard Application'),
    html.Div(children= 
             '''
             Dash: Minimum/Maximum Bar Graph
             '''),
    dcc.Graph(
        id='dash_graph',
        figure = fig
        ),
    html.Div(dcc.Input(placeholder='Enter a min value...' ,id='min_value', type='text')),
    html.Div(dcc.Input(placeholder='Enter a max value...' ,id='max_value', type='text')),
    html.Button(id='Set-val', n_clicks=0, children= 'Set'),
    html.Button(id='Refresh_current_BPM', n_clicks=0, children= 'Refresh'),
    ])
             
@app.callback(
    Output('dash_graph', 'figure'),
    Input('Set-val', 'n_clicks'),
    State('min_value', 'value'),
    State('max_value', 'value')
)
def update_value(min_value, max_value, n_clicks):
    #new value should appear in the graph here
    return fig
    
    
    

if __name__ == '__main__':
    app.run_server(debug = True)

Answer 1

在输入值并单击“设置”按钮后，我需要帮助更新图表。我尝试了很多方法，但我无法做到。

您拥有回调的设计权（尽管在您提供的代码中，您混合了参数的顺序）。您只需要使用从输入中捕获的适当值来重建数据帧。由于您将两个输入 min 和 max 都传递给回调，因此您可以重建数据框，将其传递到绘图图形中并将其返回给 dcc.Graph 组件。

此外，刷新按钮用于将图形刷新回 0 输入值。我被困在这里了。我必须在输入后更新图表还是只更新值？

您想刷新图表，使两个子图都为零，在这种情况下，您有 2 个选项：

1. 您可以在新回调中将输入设置回 0，这反过来会触发您拥有的原始回调并将图表设置为 0。

2. 在您的原始回调中，使用 dash.ctx.triggered 确定单击了哪个按钮，然后将数据帧的最小值和最大值都设置为 0。

第一个解决方案在设计方面可能更优雅。

这是一个从原始代码修改的示例：

from dash import html, Dash, dcc, Input, Output, State
import plotly.express as px
import pandas as pd
import dash

app = Dash(__name__)

df = pd.DataFrame({
    "Minimum/Maximum":["Minimum", "Maximum"],
    "Numbers of Beat": [2,60]
    })
fig = px.bar(df, x = "Minimum/Maximum", y = "Numbers of Beat", color="Minimum/Maximum")

app.layout = html.Div(
    children=[
    html.H1(children= 'HTML Dashboard Application'),
    html.Div(children= 
             '''
             Dash: Minimum/Maximum Bar Graph
             '''),
    dcc.Graph(
        id='dash_graph'
    ),
    html.Div(dcc.Input(placeholder='Enter a min value...', id='min_value', type='number', value=0)),
    html.Div(dcc.Input(placeholder='Enter a max value...', id='max_value', type='number', value=0)),
    html.Button(id='Set-val', n_clicks=0, children= 'Set'),
    html.Button(id='Refresh_current_BPM', n_clicks=0, children= 'Refresh'),
    ])
             
@app.callback(
    Output('dash_graph', 'figure'),
    State('min_value', 'value'),
    State('max_value', 'value'),
    Input('Set-val', 'n_clicks'),
    Input('Refresh_current_BPM', 'n_clicks'),

)
def update_value(min_value, max_value, *_):
    # check if a button was triggered, if not then just render both plots with 0
    ctx = dash.callback_context
    if ctx.triggered:
        # grab the ID of the button that was triggered
        button_id = ctx.triggered[0]['prop_id'].split('.')[0]
        # if the button that was triggered is the refresh one, then set min,max to 0
        # otherwise, the set button was triggered and so carry on normally
        if button_id == "Refresh_current_BPM":
            min_value = 0
            max_value = 0

    df = pd.DataFrame({
    "Minimum/Maximum":["Minimum", "Maximum"],
    "Numbers of Beat": [min_value, max_value]
    })
    fig = px.bar(df, x = "Minimum/Maximum", y = "Numbers of Beat", color="Minimum/Maximum")
    return fig

if __name__ == '__main__':
    app.run_server(debug = True)

注意

尽量不要在您的仪表板应用程序中使用全局数据框或变量。我在示例中所做的是将输入设置为默认值 0，并在回调中构造图形，该图形将在应用程序初始加载时触发。