如何调整雷达图中categoryXField与valueYField的位置至同一处？

要实现分类（country）和对应数值（litres）在同一位置显示，你可以修改X轴标签模板，直接将数值嵌入标签文本中，同时调整标签位置确保两者对齐。以下是修改后的完整代码：

function amchart_on_libload(objInst, chart_type){createRadarChart();}

function createRadarChart(){
  var root = this.RadarChart_1.getroot();

  // 创建图表
  let chart = root.container.children.push(am5radar.RadarChart.new(root, {
    panX: false,
    panY: false,
    wheelX: "panX",
    wheelY: "zoomX"
  }));

  // 添加游标
  let cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {behavior: "zoomX"}));
  cursor.lineY.set("visible", false);

  // 创建轴及渲染器
  let xRenderer = am5radar.AxisRendererCircular.new(root, {});
  // 修改X轴标签模板：同时显示分类和数值，调整排版
  xRenderer.labels.template.setAll({
    textType: "adjusted",
    radius: 20,
    // 通过dataContext关联当前分类对应的数值，用换行实现上下排列
    text: "{category}\n{valueY}"
  });

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    maxDeviation: 0,
    categoryField: "country",
    renderer: xRenderer,
    tooltip: am5.Tooltip.new(root, {})
  }));

  var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5radar.AxisRendererRadial.new(root, {}),
    min: 0,
    max: 100
  }));

  // 创建系列
  let series = chart.series.push(am5radar.RadarLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "litres",
    categoryXField: "country",
    tooltip: am5.Tooltip.new(root, {labelText:"{valueY}"})
  }));

  series.strokes.template.setAll({strokeWidth: 1});

  // 设置数据
  let data = [
    {"country": "立陶宛","litres": 100}, 
    {"country": "捷克","litres": 90}, 
    {"country": "爱尔兰","litres": 50}, 
    {"country": "德国","litres": 40}
  ];
  series.data.setAll(data);
  xAxis.data.setAll(data);

  series.appear(1000);
  chart.appear(1000, 100);
}

关键修改说明： #

• 在xRenderer.labels.template.setAll()中新增text: "{category}\n{valueY}"，利用dataContext自动匹配当前分类对应的数值，通过换行符实现分类与数值的上下对齐（也可替换为空格或其他分隔符实现横向排列）。
• 保留radius属性确保所有标签位置统一，若需调整标签整体偏移距离，可修改radius的数值。

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