如何高效更新含大量数据点的Plotly散点图？

当你每次仅新增数百个数据点却替换整个x/y数据集时，确实会产生不必要的性能损耗，以下是几种针对性的优化方案：

1. 使用Dash的Patch对象（首推） #

Dash 2.9及以上版本引入的Patch对象支持局部更新图表数据，无需重新生成完整的figure，能大幅降低前端与后端的数据传输量，提升更新效率。

示例代码：

from dash import Patch
import random

@app.callback(
    Output('live-update-graph', 'figure'),
    Input('interval-component', 'n_intervals'),
    prevent_initial_call=False
)
def update_graph(n):
    # 生成本次新增的500个数据点
    new_x = range(10000 + n*20, 10000 + n*20 + 500*20, 20)
    new_y = random.sample(range(10, 30000), 500)
    
    # 创建Patch对象，仅修改需要更新的部分
    patched_fig = Patch()
    
    # 向已有数据末尾追加新点
    patched_fig['data'][1]['x'] += list(new_x)
    patched_fig['data'][1]['y'] += new_y
    
    # 可选：限制总数据点数量，避免无限累积导致性能下降
    max_points = 20000
    if len(patched_fig['data'][1]['x']) > max_points:
        patched_fig['data'][1]['x'] = patched_fig['data'][1]['x'][-max_points:]
        patched_fig['data'][1]['y'] = patched_fig['data'][1]['y'][-max_points:]
    
    return patched_fig

2. 用dcc.Store保留历史数据状态 #

通过dcc.Store组件在前端存储当前的x/y数据，每次更新时仅追加新数据，避免重复传递完整数据集。

示例代码：

from dash import dcc, State
import random

# 在布局中添加dcc.Store存储历史数据
app.layout = html.Div([
    html.H4('TERRA Satellite Live Feed'),
    html.Div(id='live-update-text'),
    dcc.Graph(id='live-update-graph'),
    dcc.Interval(id='interval-component', interval=1*1000, n_intervals=0),
    dcc.Store(id='data-store', data={'x': [], 'y': []})  # 新增存储组件
])

@app.callback(
    Output('live-update-graph', 'figure'),
    Output('data-store', 'data'),
    Input('interval-component', 'n_intervals'),
    State('data-store', 'data'),
    prevent_initial_call=False
)
def update_graph(n, stored_data):
    # 生成本次新增数据
    new_x = range(10000 + n*20, 10000 + n*20 + 500*20, 20)
    new_y = random.sample(range(10, 30000), 500)
    
    # 更新历史数据
    updated_x = stored_data['x'] + list(new_x)
    updated_y = stored_data['y'] + new_y
    
    # 限制总数据量不超过20000
    max_points = 20000
    if len(updated_x) > max_points:
        updated_x = updated_x[-max_points:]
        updated_y = updated_y[-max_points:]
    
    # 用Patch局部更新图表
    patched_fig = Patch()
    patched_fig['data'][1]['x'] = updated_x
    patched_fig['data'][1]['y'] = updated_y
    
    return patched_fig, {'x': updated_x, 'y': updated_y}

3. 优化Plotly图表渲染性能 #

• 简化图表元素：如果不需要显示每个数据点的标记，将mode='lines+markers'改为mode='lines'，减少渲染压力。
• 使用WebGL渲染：用scattergl替代普通scatter，它基于WebGL技术，处理大规模数据时渲染速度更快。

示例修改：

# 在初始生成图表时替换trace类型
fig.append_trace({
    'x': data['Longitude'],
    'y': data['Latitude'],
    'text': data['time'],
    'name': 'Longitude vs Latitude',
    'mode': 'lines',  # 移除markers
    'type': 'scattergl'  # 使用WebGL渲染
}, 2, 1)

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