如何将AmCharts气泡饼图的X轴标签改为月份

问题描述 #

想将AmCharts气泡饼图的X轴标签修改为“Jan”“Feb”“Mar”等月份格式，于是将原代码中的ValueAxis替换为CategoryAxis并设置月份数据，但修改后气泡饼图消失。

原代码（X轴部分） #

let xAxis = chart.xAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
    tooltip: am5.Tooltip.new(root, {}),
  })
);

修改后的代码（X轴部分） #

let xAxis = chart.xAxes.push(
      am5xy.CategoryAxis.new(root, {
        renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
        tooltip: am5.Tooltip.new(root, {}),
      })
    );

  // Set months for X-axis
  xAxis.data.setAll([
  { category: "Jan" },
  { category: "Feb" },
  { category: "Mar" },
  { category: "Apr" },
]);

解决步骤 #

1. 给分类轴指定categoryField #

CategoryAxis必须明确配置categoryField字段，让轴识别分类标签的对应属性，否则无法解析分类数据：

let xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "category", // 新增：指定分类字段
    renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
    tooltip: am5.Tooltip.new(root, {})
  })
);

2. 调整系列的字段关联 #

原示例的BulletSeries基于数值轴的xField（数值）定位气泡，换成分类轴后，需要将xField设置为分类字段category，同时确保系列数据的每个项都包含对应的分类值：

// 调整系列配置
let series = chart.series.push(
  am5xy.BulletSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    xField: "category", // 改为分类字段
    yField: "value",
    valueField: "size", // 气泡大小对应的字段
    categoryField: "category"
  })
);

// 修正数据结构，每个数据项包含category
series.data.setAll([
  {
    category: "Jan",
    value: 80,
    size: 30,
    pieseries: [
      { value: 50, category: "Series 1" },
      { value: 30, category: "Series 2" }
    ]
  },
  {
    category: "Feb",
    value: 120,
    size: 40,
    pieseries: [
      { value: 70, category: "Series 1" },
      { value: 50, category: "Series 2" }
    ]
  },
  // 其他月份数据...
]);

3. 确保饼图子弹的配置适配 #

饼图子弹的数据源依赖父级数据中的pieseries字段，只要该字段正常存在，饼图子弹就能正常渲染，无需额外修改。

原因说明 #

原示例使用数值轴时，气泡通过x/y数值坐标定位；换成分类轴后，必须通过categoryField建立轴与系列数据的关联。缺少该配置或系列未绑定分类字段，会导致图表无法找到气泡的定位位置，最终出现图表消失的情况。

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