Plotly添加图表背景图时尺寸异常、图片被裁切问题

你遇到的高度裁切、坐标错位问题核心是两个配置遗漏：

• Plotly笛卡尔坐标系默认y轴数值从下往上增长，和图片原生的原点在左上角、y值向下增长的像素坐标系方向相反
• 没有手动锁定坐标轴范围和宽高比，Plotly会自动根据你添加的散点轨迹缩放坐标轴，导致图片尺寸计算错位

不需要手动设置超大的y/sizey参数，只要补全3项配置即可让图片按实际像素尺寸对齐：

1. 设置y=0，同时给add_layout_image加参数yanchor="top"，让图片的顶部锚定在y=0的位置，匹配图片左上角原点的逻辑
2. 显式设置x轴、y轴的范围为图片实际宽高，同时锁定坐标轴比例为1，避免自动缩放
3. （可选）隐藏坐标轴刻度、边框，移除画布多余留白，让展示更整洁

import plotly.graph_objects as go
from PIL import Image

# 读取图片，获取实际尺寸
img_path = "./colourfulness_test (1).jpeg"
img = Image.open(img_path)
img_width, img_height = img.size # 对应你的测试图尺寸2048、1536

fig = go.Figure()

# 添加色块轨迹，后续可替换为DataFrame中解析出的实际矩形坐标
fig.add_trace(
    go.Scatter(
        x=[0, 200, 200, 0, 0, None, 500, 700, 700, 500, 500], 
        y=[0, 0, 200, 200, 0, None, 500, 500, 700, 700, 500], 
        customdata=[10,10,10,10,10,20,20,20,20,20,20],
        fill="toself", # 直接填充生成半透明矩形色块，无需额外添加shape元素
        fillcolor="rgba(255,0,0,0.3)",
        line=dict(width=1),
        hovertemplate="色彩度值：%{customdata}<extra></extra>"
    )
)

# 正确配置背景图参数
fig.add_layout_image(
    dict(
        source=img,
        xref="x",
        yref="y",
        x=0,
        y=0,
        xanchor="left",
        yanchor="top", # 核心参数：y轴锚定图片顶部，匹配像素坐标系逻辑
        sizex=img_width,
        sizey=img_height,
        sizing="stretch",
        opacity=0.7,
        layer="below"
    )
)

# 锁定坐标轴范围和等比例，避免自动缩放变形
fig.update_xaxes(
    range=[0, img_width],
    showgrid=False,
    zeroline=False,
    showticklabels=False
)
fig.update_yaxes(
    range=[0, img_height],
    showgrid=False,
    zeroline=False,
    showticklabels=False,
    scaleanchor="x",
    scaleratio=1
)

# 移除画布边距
fig.update_layout(
    width=img_width//2, # 可按需调整展示尺寸，坐标比例不会错乱
    height=img_height//2,
    margin=dict(l=0, r=0, t=0, b=0)
)

fig.show()

• 之前参数错位的核心原因是yanchor默认值为"bottom"，会把你设置的y值作为图片的底部锚点：当你设y=1536、sizey=1536时，图片实际会从y=1536位置向上延伸1536像素到y=3072的位置，而你的测试散点y值最大仅为700，自然只能看到被裁切的极小部分，这也是为什么你把y值设到4000才能看到完整图片
• 配置scaleanchor="x"和scaleratio=1后，x、y轴的单位像素长度完全一致，不会出现拉伸变形
• 批量生成色块时，只要把每个矩形的(x0,y0)、(x1,y0)、(x1,y1)、(x0,y1)坐标按顺序拼接到x、y数组中，矩形之间用None分隔，对应的色彩度M值按相同重复次数填入customdata数组，即可实现鼠标悬浮显示对应区域数值的效果。

内容的提问来源于stack exchange，提问作者J. Maria