Plotly中如何使用图片或图标替代散点图的默认彩色标记点？

你使用的type: 'image'是全局图片trace类型，作用是将单张图片渲染到整个图表画布，所以会出现整张图被单张图片覆盖的问题。要实现每个散点显示指定摩天轮图标，使用普通scatter类型的自定义标记能力即可。

直接用摩天轮emoji作为散点的文本标记，实现成本最低：

const x = Array.from({ length: 500 }, () => Math.random() * (6 - 3) + 3);
const y = Array.from({ length: 500 }, () => Math.random() * (6 - 3) + 3);

const data = [{
    x,
    y,
    type: 'scatter',
    mode: 'text',
    text: '🎡',
    textfont: {
        // 可根据需求调整emoji显示大小
        size: 16
    },
    name: '摩天轮点位',
    showlegend: true
}];

Plotly.newPlot('chart', data);

如果需要使用特定设计的摩天轮图片，可以通过marker.symbol配置自定义图片资源：

const x = Array.from({ length: 500 }, () => Math.random() * (6 - 3) + 3);
const y = Array.from({ length: 500 }, () => Math.random() * (6 - 3) + 3);

// 替换为你的摩天轮图片本地路径/base64资源地址
const ferrisWheelIcon = '你的摩天轮图标资源地址';

const data = [{
    x,
    y,
    type: 'scatter',
    mode: 'markers',
    marker: {
        symbol: `url(${ferrisWheelIcon})`,
        // 可根据图片尺寸调整显示大小
        size: 20
    },
    name: '摩天轮点位',
    showlegend: true
}];

Plotly.newPlot('chart', data);

注意：自定义图片需要满足同源策略，否则会出现跨域无法渲染的问题。

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