Python中如何在Plotly散点图中使用自定义图片替换散点标记

该需求可以完全实现，核心通过Plotly的布局图片配置绑定数据坐标系即可完成精确定位，具体操作如下：

核心思路 #

1. 隐藏原有散点的默认圆点标记
2. 为每个散点坐标单独配置自定义图片，将图片的参考坐标系设置为图表的数据坐标系，即可让图片精准对齐对应坐标点

完整示例代码 #

import plotly.express as px

# 原有散点数据
x_data = [0, 1, 2, 3, 4]
y_data = [0, 1, 4, 9, 16]
# 替换的自定义图片路径，顺序和散点顺序一一对应即可
img_paths = [
    "img0.png",
    "img1.png",
    "img2.png",
    "img3.png",
    "img4.png"
]

# 创建基础散点图
fig = px.scatter(x=x_data, y=y_data)
# 隐藏默认的圆点标记
fig.update_traces(marker=dict(opacity=0))

# 批量添加自定义图片
images = []
for x, y, img_path in zip(x_data, y_data, img_paths):
    images.append(dict(
        source=img_path,
        x=x,
        y=y,
        # 指定参考坐标系为数据坐标系，核心配置
        xref="x",
        yref="y",
        # 图片对齐锚点设为中心，保证和坐标点完全对齐
        xanchor="center",
        yanchor="center",
        # 图片大小，可根据实际图表数值范围调整
        sizex=0.3,
        sizey=0.3,
        # 不随图表缩放裁剪图片
        sizing="contain",
        layer="above"
    ))

# 把图片配置更新到图表布局
fig.update_layout(images=images)
fig.show()

关键参数说明 #

• xref/yref：设置为x和y时，图片的x/y坐标会使用图表的数据坐标系，而非默认相对于画布的比例坐标，这是实现精准定位的核心
• sizex/sizey：单位和对应坐标轴的数值单位一致，可根据图表的数值范围灵活调整图片显示大小，避免图片过大重叠
• xanchor/yanchor：设置为center时，图片的中心点会和指定的x/y坐标完全对齐，不会出现位置偏移

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