AmCharts v5：如何将轴范围标签置于系列图形上方？

问题原因 #

轴范围的标签默认属于轴的附属元素，层级低于柱状图系列，且不在图表的绘图容器（plotContainer）层级内，因此仅设置above: true或zIndex无法让标签显示在柱状图上方。

具体解决方案 #

需要将轴范围的标签移至绘图容器中，并调整其层级优先级：

1. 创建轴范围后，获取标签元素，修改其父容器为图表的plotContainer，确保标签与系列处于同一层级
2. 为标签设置更高的zIndex值，确保它绘制在柱状图上方
3. 可根据需求调整标签的位置偏移，避免与柱子重叠

修改后的关键代码片段：

// 假设已创建yAxis和chart实例
let value = 120;
let seriesRangeDataItem = yAxis.makeDataItem({ value: value, endValue: value });
let seriesRange = yAxis.createAxisRange(seriesRangeDataItem);

// 配置轴范围的线条样式（可选）
seriesRange.get("grid").setAll({
  stroke: am5.color(0xff0000),
  strokeWidth: 2,
  strokeDasharray: [3, 3]
});

// 配置标签并调整层级
seriesRange.get("label").setAll({
  text: value.toString(),
  fill: am5.color(0xff0000),
  location: 1, // 将标签定位到图表右侧
  parent: chart.plotContainer, // 移至绘图容器，与系列同层级
  zIndex: 10, // 设置更高层级，确保在柱状图上方
  dx: 10 // 向右偏移，避免与柱子边缘重叠
});

// 可选：如果需要轴范围线条也在系列上方，设置系列的belowAxisRanges为false
// series.set("belowAxisRanges", false);

原理说明 #

• 将标签父容器改为plotContainer后，标签与柱状图系列处于同一渲染层级，此时zIndex属性才会生效
• 更高的zIndex值会让标签优先绘制在系列之上
• location: 1确保标签对齐到图表的右侧（对应Y轴的末端），dx用于微调位置避免重叠

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