使用axis ranges为categoryAxis添加自定义标签不生效如何解决

解决方法 #

你的代码未生效的核心原因是 amCharts v4 的 CategoryAxis 轴范围默认不会渲染文本标签，需要手动开启标签配置，补充参数即可正常显示：

修正后完整代码

// 隐藏原生类目轴标签，避免和自定义标签重叠（不需要则删除该行）
categoryAxis.renderer.labels.template.disabled = true;

let range0 = categoryAxis.axisRanges.create();
range0.value = "MCR.INV-1";
range0.text = "MCR.INV-1";
range0.label.disabled = false;
range0.label.align = "left";
range0.label.paddingLeft = 12;

let range500 = categoryAxis.axisRanges.create();
range500.value = "MCR.INV-2";
range500.text = "MCR.INV-2";
range500.label.disabled = false;
range500.label.align = "left";
range500.label.paddingLeft = 12;

let range1000 = categoryAxis.axisRanges.create();
range1000.value = "PEV1.INV-1";
range1000.text = "PEV1.INV-1";
range1000.label.disabled = false;
range1000.label.align = "left";
range1000.label.paddingLeft = 12;

注意事项

• 确保配置的range.value取值和你绑定到类目轴的数据集内的category字段取值完全一致，大小写、特殊符号都不能有差异
• 如果需要调整标签样式，可直接修改range.label的fill（颜色）、fontSize（字号）、fontWeight（字重）等属性
• 垂直Y轴作为类目轴时，可额外配置range.label.rotation调整标签旋转角度适配排版

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