情节刷新按钮不更新我的图表

Question

在此处或在 plotly 论坛上有一些关于该主题的问题，但我无法在我的仪表板上使用它并且很难找到正确的解决方案。

简而言之，为了清楚起见，我的仪表板上的一个页面包含一个输入框、一个按钮和 2x Div，其中加载了两个图表。

layout = html.Div([
    dbc.Container([
        dbc.Row([
            dbc.Col('Symbol: '),
            dbc.Col(dcc.Input(id='pcal_symbol', placeholder='enter a stock ticker')),
        ]),
        html.Br(),
        dbc.Row([html.Button("Plot", id='submit_pcal', n_clicks=0)]),
        html.Br(),
        html.Div(id='pcal_rv_graph'),
        html.Div(id='pcal_rv_perc_graph'),
    ])
])

所以我提交了一个输入，并在单击按钮时收集相应的数据（来自.json 平面文件）并生成两个图表。在论坛上阅读此问题后，看来我需要从回调中将 json 加载到数据帧中（而不是将数据帧作为局部变量）。这是我的回调：

@app.callback(
    [
        Output('pcal_rv_graph', 'children'),
        Output('pcal_rv_perc_graph', 'children')
    ],
    [
        Input('submit_pcal', 'n_clicks'),
    ],
    [
        State('pcal_symbol', 'value'),
    ],
    prevent_initial_call=True
)
def update_plot(n_clicks, symbol):
    if n_clicks is not None:
        ticker = str(symbol).upper()

        fig1 = go.Figure()
        fig2 = go.Figure()
        #fecth the data
        df1 = pd.read_json(...)
        df2 = pd.read_json(...)

        fig1.add_trace(go.Scatter(x=df1['date'], y=df1['ind1'], mode='lines+markers'))
        fig2.add_trace(go.Scatter(x=df2['date'], y=df2['ind2'], mode='lines+markers'))    

        return [dcc.Graph(id='pcal_rv_graph', figure=fig1),
                dcc.Graph(id='pcal_rv_perc_graph', figure=fig2)]

我第一次在我的输入框中输入一个符号时，图形显示正确；但如果我将输入更改为另一个符号，则图表不会更新。调试时，我可以看到新符号正在更新，并且正在获取数据，但不知何故，图表不会更新。我认为我不需要 dbc Interval 组件，因为我的数据源每天都会更新，所以这不适用于实时图表。此外，我正在回调中加载数据，并且我不希望有一些隐藏的 Div 来存储我的数据（这意味着为我的完整仪表板保存 8 或 9 个数据帧，而不仅仅是像上面的示例中的 2 个）。根据我的阅读，这会使事情变得更慢。不确定这是否重要，但对于回调我确实加载了更多的状态函数（5 个默认参数）

编辑：来自the plotly documentation：

回调第一次返回正确的输出 调用，但一旦全局 df 变量被修改，任何后续 使用该数据框的回调未使用原始数据 没有了。

这是我的问题。然而，感觉就像我正在关注他们提供的解决方案，即使用在回调中初始化的中间数据帧......

Edit2：更新

Edit3：我想我找到了一个“修复”html.Div(id='...') 是应该加载图表的地方，最初我的回调返回 dcc.Graph(id, fig)。如果我指定 dcc.Graph(id) 而不是 html.Div 作为我的图形容器并在我的回调中返回 fig ，那么这些数字就会正确更新。现在我需要弄清楚如何在开始时隐藏空图......

Answer 1

我通过在 OP 中使用我的 Edit3 并使用 this answer 将图形初始化为空白图形来解决它