如何在amcharts雷达图中实现与饼图一致的外侧弯曲标签效果

数据老陈

2026-10-19

实现步骤

先预留雷达图外侧空间，隐藏默认平直标签
在你现有代码初始化完categoryAxis的位置后，先添加以下配置：

// 缩小雷达图半径，给外侧弯曲标签预留空间
chart.radius = am4core.percent(70);
// 隐藏默认的类目轴平直标签
categoryAxis.renderer.labels.template.disabled = true;

为每个类目生成对应位置的弯曲标签
继续添加以下代码即可实现弯曲标签效果：

// 遍历所有类目生成环形弯曲标签
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  // 计算每个标签对应的角度
  let angle = categoryAxis.getAngle(target.dataItem);
  // 标签距离雷达图外侧的距离，可自行调整
  let labelRadius = chart.radius + 30;
  
  // 创建环形文本实例
  let label = target.createChild(am4core.CircularLabel);
  label.text = target.dataItem.category;
  label.radius = labelRadius;
  label.startAngle = angle - categoryAxis.renderer.cellStartAngle / 2;
  label.endAngle = angle + categoryAxis.renderer.cellEndAngle / 2;
  label.orientation = "horizontal";
  label.fontSize = 13;
  label.fill = am4core.color("#000");
  
  // 处理下半圆标签翻转问题，避免文字倒置
  if (angle > 180) {
    label.rotation = 180;
    label.inside = true;
  }
  
  return dy;
});