Plotly Express处理10万条数据卡顿问题及预计算方案咨询

当数据量达到10万条时，Plotly Express的px.ecdf()会为每个原始数据点生成ECDF曲线上的对应点，同时默认使用markers+lines模式渲染，这会导致前端需要处理大量绘图元素，最终引发卡顿。而1万条数据的元素量在前端承受范围内，所以运行正常。

通过预计算ECDF核心数据的方式可以有效解决这个问题，以下是具体实现步骤：

1. 预计算ECDF数据 #

ECDF的核心逻辑是：对数据排序后，每个位置的累计概率为(当前位置索引 + 1) / 总数据量。手动计算这些值，避免Plotly重复处理原始数据。

示例代码：

import plotly.graph_objects as go
import numpy as np
import pandas as pd

# 生成原始数据
dfa = pd.DataFrame()
dfa["travel_time(min)"] = range(100000)

# 预计算ECDF的x和y值
sorted_x = np.sort(dfa["travel_time(min)"])
ecdf_y = (np.arange(len(sorted_x)) + 1) / len(sorted_x)

2. 用Graph Objects绘制优化后的ECDF图 #

使用go.Scatter直接绘制预计算好的数据，同时选择lines模式（无需标记点），大幅减少渲染压力：

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=sorted_x,
    y=ecdf_y,
    mode='lines',  # 仅绘制线条，省略标记点
    name='ECDF'
))

fig.update_layout(
    xaxis_title='travel_time(min)',
    yaxis_title='累计概率'
)
fig.show()

3. 可选：降采样进一步优化（允许精度损失） #

如果10万条数据的线条仍然卡顿，可以对预计算的ECDF数据进行降采样，每隔N个点取一个样本，同时保留最后一个点保证曲线完整性：

# 设置降采样间隔，每100个点取一个
sample_interval = 100
sampled_x = sorted_x[::sample_interval]
sampled_y = ecdf_y[::sample_interval]

# 补充最后一个点，确保ECDF曲线终点为(最大值, 1.0)
sampled_x = np.append(sampled_x, sorted_x[-1])
sampled_y = np.append(sampled_y, ecdf_y[-1])

# 绘制降采样后的曲线
fig = go.Figure()
fig.add_trace(go.Scatter(
    x=sampled_x,
    y=sampled_y,
    mode='lines',
    name='ECDF（降采样）'
))

fig.update_layout(
    xaxis_title='travel_time(min)',
    yaxis_title='累计概率'
)
fig.show()

优化效果说明 #

• 预计算ECDF数据避免了Plotly内部对原始数据的重复处理，减少了计算开销；
• 采用lines模式渲染，相比默认的markers+lines减少了10万个标记点的渲染任务；
• 降采样后数据量可降至千级，前端渲染完全无压力，且视觉效果与原始曲线几乎无差异。

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