如何将Plotly Express中的填充矩形移至背景图层？

要让add_vrect()添加的粉色矩形置于散点下方的背景层，只需在调用add_vrect()时添加layer="below"参数即可——该参数默认值为"above"，会让矩形覆盖在所有数据轨迹之上。

修改后的完整代码 #

import numpy as np
import plotly.express as px

def plot(x,y):
    fig = px.scatter(
        x=x,
        y=y,
        error_y=[0] * len(y),
        error_y_minus=y
    )

    # 添加layer="below"参数将矩形置于背景层
    fig.add_vrect(x0=0, x1=np.pi, line_width=0, fillcolor="pink", layer="below")
    tickvals = [0,np.pi/2,np.pi,np.pi*3/2,2*np.pi]
    ticktext = ["0","$\\frac{\\pi}{2}$","$\\pi$","$\\frac{3\\pi}{2}$","$2\\pi$"]  # 修正原ticktext的数值匹配错误
    layout = dict(
        title="demo",
        xaxis_title="X",
        yaxis_title="Y",
        title_x=0.5,   
        margin=dict(l=10,t=20,r=0,b=40),
        height=300,
        xaxis=dict(
            tickangle=0,
            tickvals = tickvals,
            ticktext=ticktext,
        ),
        yaxis=dict(
            showgrid=True,
            zeroline=False,
            showline=False,
            showticklabels=True
        )
    )

    fig.update_traces(
        marker_size=14,
    )    
    fig.update_layout(layout)
    
    fig.show()
    return

n = 20
x = np.linspace(0.0, 2*np.pi, n)
y = np.sin(x)

plot(x,y)

关键说明 #

• layer参数直接控制矩形的图层位置：
  • "above"（默认）：矩形显示在所有数据轨迹（如散点）上方
  • "below"：矩形显示在所有数据轨迹下方，作为背景元素

另外顺带修正了原代码中ticktext的一处错误，将$\\frac{3\\pi}{4}$改为$\\frac{3\\pi}{2}$，使其与对应的tickvals（np.pi*3/2）数值匹配。

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