如何让Plotly散点图显示在注释上方？

核心问题分析 #

Plotly的默认图层顺序为：图形形状(Shapes) → 数据轨迹(Traces) → 注释(Annotations)，注释会默认显示在散点等轨迹上方，而add_annotation()确实没有zorder参数，因此需要通过调整实现注释在散点下方的效果。

方案一：用add_shape替代add_annotation添加文本 #

将注释文本转换为形状文本，形状的层级低于轨迹，散点会自动显示在文本上方：

# 先批量添加注释形状
for i, px in enumerate(data['xpos']):
    nice = timegraph['nice'][i]
    fig.add_shape(
        type="text",
        x=px,
        y=0,
        xshift=10,
        yshift=80,
        text=f"<a href='{data['urls'][i]}' target='_blank'>{px} - {nice}</a>",
        textangle=270,
        fillcolor="#FFFFFF",
        line_color="#FFFFFF",  # 匹配背景色消除边框
        layer="below"  # 明确指定形状在轨迹下方
    )

# 仅添加一次散点轨迹（移出循环，避免重复生成相同轨迹）
fig.add_trace(
    go.Scatter(
        x=data['xpos'],
        y=timegraph['ygrid'],
        yaxis="y2",
        name="Total Testrun Time",
        marker={'color': 'gray', 'size': 15},
        text=timegraph['nice'],
        mode='markers'
    )
)

方案二：显式设置轨迹层级（兼容原有注释逻辑） #

如果坚持使用add_annotation，可以强制将散点轨迹的layer设为'above'，确保轨迹优先级高于注释：

# 先添加所有注释
for i, px in enumerate(data['xpos']):
    nice = timegraph['nice'][i]
    fig.add_annotation(
        x=px, xshift=10, y=0, yshift=80, 
        text=f"<a href='{data['urls'][i]}' target='_blank'>{px} - {nice}</a>", 
        textangle=270, bgcolor="#FFFFFF"
    )

# 添加散点轨迹并强制层级为最高
fig.add_trace(
    go.Scatter(
        x=data['xpos'],
        y=timegraph['ygrid'],
        yaxis="y2",
        name="Total Testrun Time",
        marker={'color': 'gray', 'size': 15},
        text=timegraph['nice'],
        mode='markers',
        layer='above'
    )
)

关键修正：避免重复生成轨迹 #

你的原始代码在循环内重复调用add_trace，会生成len(data['xpos'])个完全相同的散点轨迹，既浪费资源又可能引发显示异常，务必将add_trace移出循环，仅执行一次。

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