Plotly单trace绘制多条碎片化线段解决多trace渲染卡顿问题

初始实现与存在的问题 #

首先构造测试用数据集，存储每条水平线段的左右端点x坐标：

import pandas as pd

df = pd.DataFrame({'x1': [1,7,15], 'x2': [5,10,20]})
df

初始绘图方案为遍历数据集每一行，为每条线段单独添加一个Scatter trace：

import plotly.graph_objects as go
fig = go.Figure()
for row in df.iterrows():
    row_data = row[1]
    fig.add_trace(go.Scatter(x=[row_data['x1'], row_data['x2']], y=[0,0], mode='lines',
                            line={'color': 'black'}))
fig.update_layout(showlegend=False)
fig.show()

该方案可以输出符合预期的互不重叠分段水平线段，但当线段规模达到30000条时，图表渲染、缩放、平移等交互操作的性能会出现严重下降。此前尝试过使用shapes组件绘制线段，但会丢失trace原生支持的悬停信息等交互功能，也无法确认该方案是否能有效提升性能，核心需求为实现单个trace下的碎片化线段绘制，同时保留完整交互能力、提升渲染性能。

单trace实现方案 #

利用Plotly折线绘制的特性：坐标序列中遇到np.nan值时会自动断开线段，不会将断点前后的坐标连为一条线。基于该特性，无需为每条线段单独创建trace，只需将所有线段的坐标按照「线段起点x、线段终点x、np.nan断连标记」的规则拼接为一组x坐标数组，对应y坐标按相同规则填充0和np.nan，即可在单个Scatter trace中实现和原方案完全一致的显示效果，trace数量从数万条降到1条，渲染和交互性能会得到极大提升，同时保留所有trace原生的悬停、样式配置等功能。

验证通过的实现代码如下：

import numpy as np
import plotly.graph_objects as go

x = [1, 5, np.nan, 7, 10, np.nan, 15, 20]
y = [0, 0, np.nan, 0, 0, np.nan, 0, 0]
fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, mode='lines'))
fig.update_layout(showlegend=True)
fig.show()

针对30000条线段的大规模场景，可直接通过numpy/pandas的数组操作批量生成拼接后的坐标数组，无需手动逐行拼接，处理效率更高。

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