Dash Plotly中的烛台图和折线图，它会随着回调而更新，但会消失

Posted 2021-04-19

我试图在一个图中显示一个烛形图和一个折线图。我尝试通过回调更新它们，以检查csv文件中的新更新。它们都正确显示，直到触发回调为止。此后，折线图仍然显示，但烛台图变得不可见。当我调整大小或缩放时，图形会正确显示，直到再次触发回调为止。如何正确设置一个图，在另一个y轴上具有多个图形（烛台图和折线图），并具有有效的回调函数。

以下是gif，以显示正在发生的情况：

这是我的代码：

df_btc = pd.read_csv("data/livedata.csv")

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div([
            dcc.Graph(id='live_graph', animate=True, style={"height": "100vh"}),
            dcc.Interval(
                id='interval_component',
                interval=2000,
            ),
        ]),
    ],
    style = {"height": "100vh"}
)

@app.callback(Output('live_graph', 'figure'),
        [Input('interval_component', 'n_intervals')])
def graph_update(n):
    df_btc = pd.read_csv("data/livedata.csv")

    ...
    (parsing the data and making lists, asuming this works as it shows up initially)
    ...        

    graph_candlestick = go.Candlestick(x=list(btc_date),
                            open=list(btc_open),
                            high=list(btc_high),
                            low=list(btc_low),
                            close=list(btc_close),
                            xaxis="x",
                            yaxis="y",
                            visible=True)

    graph_rsi = get_rsi(df_btc)
    return {'data': [graph_rsi, graph_candlestick], 'layout': go.Layout(xaxis=dict(range=[min(btc_date),max(btc_date)]),
                                                yaxis=dict(range=[min(btc_low),max(btc_high)],),
                                                yaxis2=dict(range=[0,100], overlaying='y', side='right'),) }

def get_rsi(df_btc):

    ...
    (calculating the data and making lists, asuming this works as it shows up initially)
    ...

    return go.Scatter(x=list(rsi_date),
                        y=list(rsi),
                        xaxis="x1",
                        yaxis="y2",
                        visible=True,
                        showlegend=False)

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

我已经第一次和第二次比较了我的回调函数的输出。它们恰好完全相同。

答案

[似乎只有在第二个回调之后图形才会消失，并且回调返回完全相同的数字（具有相同的数据和相同的布局），我们可以检查数据（或最后一个索引）是否已更改。如果未更改，则可以在回调中引发PreventUpdate异常。这样，回调仅运行一次，并且仅在要添加新数据时运行。

在回调graph_update中，我们可以执行以下操作：

prevIndex = ""
...
def graph_update(n):
    global prevIndex
    data = pd.read_csv("data/livedata.csv")
    if (data["index"].iloc[-1] != prevIndex):
        prevIndex = data["index"].iloc[-1]
        ...
        return {...}
    else:
        raise dash.exceptions.PreventUpdate()