Plotly.js如何实现散点图误差棒与标记点共享同一colorscale配色

Plotly.js 原生的 error_y.color 不支持直接传入数值数组来自动匹配 marker 的 colorscale 映射规则，所以需要通过拆分 trace 的方式实现需求：

• 将每个数据点拆分为独立的 scatter trace，每个trace仅包含单个点
• 每个trace的marker.color和error_y.color使用同一套配色规则映射
• 仅保留第一个trace的marker.showscale = true，其余trace关闭该配置，避免出现多个重复色条
• 所有trace设置showlegend: false隐藏多余图例

完整可运行代码 #

HTML代码 #

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

JS代码 #

// 原始数据配置
const yData = [2, 1, 3];
const colorValues = [1, 2, 3];
const errorValues = [0.5, 0.7, 0.5];
const targetColorscale = 'Viridis'; // 可替换为任意Plotly支持的配色方案

// 预定义颜色映射规则，保证点和误差棒颜色一致
const colorScaleArr = Plotly.Colorscale.get(targetColorscale).map(item => item[1]);
const colorMapper = Plotly.d3.scale.linear()
  .domain([Math.min(...colorValues), Math.max(...colorValues)])
  .range(colorScaleArr);

// 生成每个点对应的独立trace
const traces = yData.map((y, index) => {
  return {
    type: 'scatter',
    mode: 'markers',
    y: [y],
    showlegend: false,
    marker: {
      size: 20,
      color: colorValues[index],
      colorscale: targetColorscale,
      cmin: Math.min(...colorValues),
      cmax: Math.max(...colorValues),
      showscale: index === 0 // 仅第一个trace显示公共色条
    },
    error_y: {
      type: 'data',
      array: [errorValues[index]],
      color: colorMapper(colorValues[index])
    }
  }
})

Plotly.newPlot('myDiv', traces)

内容的提问来源于stack exchange，提问作者Friedrich -- Слава Україні