Plotly.js 如何在两坐标轴坐标点的连线中间添加文本标签

核心实现逻辑 #

线段的居中标签定位完全可以在坐标轴数据坐标系下完成，不需要依赖屏幕像素换算：任意两个相邻连线端点的中点坐标，直接取两端点x、y值的算术平均值即可，这种方式下标签会跟着图表缩放、自适应拉伸自动对齐，不会出现错位。

两种可落地实现方式 #

• 方式一（推荐）：新增独立的纯文本scatter图层
  • 遍历现有折线的所有相邻坐标点，逐段计算中点坐标：中点x = (当前点x + 下一个相连点x) / 2，中点y = (当前点y + 下一个相连点y) / 2
  • 新建一个mode: 'text'类型的scatter trace，将所有计算得到的中点坐标作为该trace的x、y值，对应线段的标签文本作为text数组内容，通过textposition调整文本和中点的相对位置，避免标签压在折线上
  • 该trace不需要显示标记、不需要画线，关闭多余的悬浮交互即可
• 方式二（不推荐）：在原有折线trace中插入中点坐标
  直接把计算好的中点坐标插入原有折线的x、y数组，对应位置填充标签文本。这种方式很容易打乱原有折线的连接顺序，造成线条错乱，维护成本很高。

适配你现有代码的修改片段 #

// 提取原有折线的端点坐标
const originalLineX = trace1.x;
const originalLineY = trace1.y;

// 批量计算每段连线的中点和对应标签
const midXList = [];
const midYList = [];
const midTextList = [];
for (let i = 0; i < originalLineX.length - 1; i++) {
  midXList.push((originalLineX[i] + originalLineX[i+1]) / 2);
  midYList.push((originalLineY[i] + originalLineY[i+1]) / 2);
  midTextList.push(`段${i+1}`); // 可自定义每段标签内容
}

// 生成专门承载线段标签的trace
const lineLabelTrace = {
  x: midXList,
  y: midYList,
  mode: 'text',
  type: 'scatter',
  text: midTextList,
  textposition: 'top center',
  showlegend: false,
  hoverinfo: 'none',
  textfont: {
    color: '#333333',
    size: 12
  }
};

// 将标签trace加入数据集
const data = [trace1, lineLabelTrace];

落地注意事项 #

• 如果需要让标签和线段保持固定间距，不需要换算屏幕像素，直接在计算出的中点y值上叠加一个数据坐标系下的固定偏移量即可，偏移量会跟着图表缩放自动适配
• 不推荐用全局annotations实现批量线段标签，annotations是固定静态配置，后续动态更新数据时维护成本极高，用scatter文本trace和图形共用同一套坐标系，滚动缩放时永远对齐
• 可以通过cliponaxis: false配置避免标签被坐标轴区域裁切
• 你现有代码中yaxis的range配置写了三个元素是无效的，Plotly坐标轴range仅支持传入两个值（min、max），需要调整为range: [0, 951.4214]这类双值格式，否则会出现坐标轴范围适配异常

内容的提问来源于stack exchange，提问作者Marc Kenneth Lomio