需要关于使用输入、输出、按钮、图形对python回调进行绘图的帮助

Question

我是plotly-dash-python的新手。在输入值并单击Set按钮后，我需要帮助更新图形。我尝试了很多方法，但都做不好。此外，刷新按钮用于将图形刷新回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

输入值并单击Set按钮后，我需要帮助更新图形。我尝试了很多方法，但都做不好。

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

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

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

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)

注意

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