DASH实时蜡烛图添加指标后定时更新时K线消失问题求助

问题描述 #

我正在开发一款DASH实时蜡烛图（K线图）应用，遇到问题如下：

• 项目运行初始加载时，蜡烛图和指标都能正常显示
• dcc.Interval组件触发定时更新后，蜡烛图就会消失，即使从图例选项卡重新勾选显示蜡烛图，每次更新后仍会再次消失
• 仅展示蜡烛图不添加指标时，更新完全正常，只有添加指标后才会出现首次更新后蜡烛图不可见的问题

数据来自WebSocket流，先存入SQL数据库，再读取转换为pandas DataFrame使用。

问题截图 #

相关实现代码 #

import dash
from dash.dependencies import Output, Input
from dash import dcc
from dash import html
import pandas as pd
import plotly.graph_objs as go
import flask
import waitress
from waitress import serve
from plotly.subplots import make_subplots

# 注：原代码缺失数据库engine初始化、make_subplots导入逻辑
server = flask.Flask(__name__) # define flask app.server

app = dash.Dash(__name__, server=server) # call flask server
    

app.layout = html.Div(
    html.Div([
        dcc.Graph(id='live-update-graph-scatter', animate=True),
        dcc.Interval(
            id='interval-component',
            disabled=False,
            interval=1*5000,
            n_intervals=0
        )
    ])
)

@app.callback(Output('live-update-graph-scatter', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph_scatter(n):


    rec = pd.read_sql_table('crypto', engine)
    rec1 = pd.DataFrame(rec)
    print(rec1)
    rec1.columns = ['date', 'open', 'high', 'low', 'close', 'volume', 'EMA', 'EMA2']

    rec1['date'] = pd.to_datetime(rec1['date'])
    rec1.set_index('date', inplace=True)

    ###SUBPLOT AND Candlestick CHART
    fig = make_subplots(rows=4, cols=1)

    fig.add_trace(go.Candlestick(
        x=rec1.index,
        open=rec1['open'],
        high=rec1['high'],
        low=rec1['low'],
        close=rec1['close']),
        row=1,
        col=1,
    )

    ###### ADD INDICATOR TRACES:
    fig.add_trace(
        go.Scatter(
            x=rec1.index,
            y=rec1['EMA'],
            marker=dict(color='blue')
        ),
        row=1,
        col=1
    )
    fig.add_trace(
        go.Scatter(
            x=rec1.index,
            y=rec1['EMA2'],
            marker=dict(color='red')
        ),
        row=1,
        col=1
    )



    return fig



if __name__ == '__main__':
    serve(app.server, host="localhost", port=5005)

解决方案 #

这个问题的核心是两个配置冲突导致的渲染异常，按以下步骤修改即可解决：

1. 关闭Graph组件的animate属性
   实时更新蜡烛图场景下，Plotly的动画过渡逻辑会导致多trace叠加时渲染错位，把dcc.Graph的animate=True改为animate=False，蜡烛图场景不需要这类过渡动画。
2. 关闭蜡烛图默认的X轴范围滑块，显式指定trace名称
   蜡烛图默认携带的底部范围滑块和子图布局存在冲突，会导致更新时显示异常，同时给每个trace指定固定名称，避免更新时图例索引错位导致的可见性异常。

修正后的核心代码示例 #

Layout部分修改：

dcc.Graph(id='live-update-graph-scatter', animate=False)

回调函数修改：

@app.callback(Output('live-update-graph-scatter', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph_scatter(n):
    rec = pd.read_sql_table('crypto', engine)
    rec1 = pd.DataFrame(rec)
    rec1.columns = ['date', 'open', 'high', 'low', 'close', 'volume', 'EMA', 'EMA2']
    rec1['date'] = pd.to_datetime(rec1['date'])
    rec1.set_index('date', inplace=True)

    fig = make_subplots(rows=4, cols=1)
    # 给蜡烛图指定固定名称和样式
    fig.add_trace(go.Candlestick(
        x=rec1.index,
        open=rec1['open'],
        high=rec1['high'],
        low=rec1['low'],
        close=rec1['close'],
        name='K线',
        increasing_line_color= '#26a69a',
        decreasing_line_color= '#ef5350'
    ), row=1, col=1)

    fig.add_trace(
        go.Scatter(
            x=rec1.index,
            y=rec1['EMA'],
            marker=dict(color='blue'),
            name='EMA1'
        ), row=1, col=1
    )
    fig.add_trace(
        go.Scatter(
            x=rec1.index,
            y=rec1['EMA2'],
            marker=dict(color='red'),
            name='EMA2'
        ), row=1, col=1
    )
    # 关键配置：关闭蜡烛图默认的范围滑块，避免和子图布局冲突
    fig.update_layout(xaxis_rangeslider_visible=False)
    return fig

修改完成后重新运行即可解决定时更新后蜡烛图消失的问题。

内容的提问来源于stack exchange，提问作者Mathias Albrechtsen