如何在AmCharts 5雷达图中显示全部12个分类？

我在React中使用AmCharts 5创建雷达图，数据为12个结构为{category: 'Something', value: 5}的对象数组。但图表自动缩小，仅显示6个分类标签和分区（橙色标记显示存在12个数据）。参考官方示例开发的代码如下：

const root = am5.Root.new(`chartdiv-${chartData.id}`);

// Apply the theme
root.setThemes([
    am5themes_Animated.new(root)
]);

const chart = root.container.children.push(
    am5radar.RadarChart.new(root, {})
);

// Create axes and their renderers
const xRenderer = am5radar.AxisRendererCircular.new(root, {});
xRenderer.labels.template.setAll({
    radius: 10,
    textType: 'adjusted',
    fontSize: 12,
});

const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    maxDeviation:  0.1,
    categoryField: 'category',
    renderer: xRenderer,
    groupData: false,
    minZoomCount:12,
}));

const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    min: 1,
    max: 6,
    renderer: am5radar.AxisRendererRadial.new(root, {}),
    opacity: 0
}));

// Create series
const series = chart.series.push(am5radar.RadarLineSeries.new(root, {
    name: 'Series',
    xAxis,
    yAxis,
    valueYField: 'value',
    categoryXField: 'category',
    tooltip: am5.Tooltip.new(root, {
        labelText: '{valueY}'
    }),
    stroke: am5.color('#ef763a'),
}));

// Set lines
series.strokes.template.setAll({
    strokeWidth: 2,
});

// Set bullets
series.bullets.push(() => am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
        radius: 5,
        fill: am5.color('#ef763a'),
    })
}));

修改方案 #

问题根源是AmCharts 5的雷达图分类轴默认会根据网格间距自动隐藏部分标签和分区，只需调整X轴渲染器的配置即可显示全部12个分类：

1. 在创建xRenderer时添加minGridDistance: 0，强制渲染所有网格和标签，取消自动隐藏逻辑：

const xRenderer = am5radar.AxisRendererCircular.new(root, {
    minGridDistance: 0 // 关键配置，强制显示所有分类
});

2. 适当增大标签的radius值（比如改为20），避免12个标签出现重叠：

xRenderer.labels.template.setAll({
    radius: 20, // 给标签预留更多显示空间
    textType: 'adjusted',
    fontSize: 12,
});

另外你代码中已设置的groupData: false是正确的，它能防止轴自动合并分类数据，无需修改。

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