如何使用AmChart 5在饼图中间显示数值总和而非百分比

问题原因 #

你之前的写法存在两处问题：

1. 独立创建的Label组件无法直接识别[values.value.sum]占位符，该占位符仅在PieSeries内部的标签上下文生效
2. 中心标签的centerY属性设置为am5.p100，对应容器最底部，不会显示在饼图空心中心位置

修复方案 #

方法1：预计算总和（最简单稳妥） #

直接遍历数据源计算数值总和，赋值给中心标签即可，默认就是十进制原始数值，不会显示百分比：

am5.ready(function() {
    var totalUsers = {!! json_encode($totalUsers) !!};
    // 预计算所有数据的数值总和
    const totalSum = totalUsers.reduce((sum, item) => sum + item.value, 0);
    var root = am5.Root.new("total-users");
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    // 配置数字格式化，可按需调整保留小数位数
    root.numberFormatter.set("numberFormat", "#.##");
    
    var chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout,
        innerRadius: am5.percent(50)
    }));

    var series = chart.series.push(am5percent.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category",
        alignLabels: false
    }));

    // 扇区标签如果也需要显示数值而非百分比，添加这行配置
    series.labels.template.set("text", "{category}: {value}");
    series.labels.template.setAll({
        textType: "circular",
        centerX: 0,
        centerY: 0,
    });

    var label = chart.seriesContainer.children.push(am5.Label.new(root, {
        textAlign: "center",
        centerY: am5.p50, // 改为p50实现垂直居中，显示在饼图空心处
        centerX: am5.p50,
        fontSize: 24, // 可自定义字号调整显示效果
        text: totalSum.toString()
    })
);
    
    series.data.setAll(totalUsers);

    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        marginTop: 15,
        marginBottom: 15,
    }));

    legend.data.setAll(series.dataItems);
    series.appear(1000, 100);

}); // end am5.ready()

方法2：动态绑定聚合值（适合数据动态更新的场景） #

如果你的饼图数据会后续动态修改，可以直接绑定PieSeries自带的valueSum聚合属性到标签，无需手动重新计算总和：

// 把方法1中的label创建部分替换为下面的代码即可
var label = chart.seriesContainer.children.push(am5.Label.new(root, {
    textAlign: "center",
    centerY: am5.p50,
    centerX: am5.p50,
    fontSize: 24
}));
// 绑定series自动计算的总和到标签文本，数据更新时会自动同步
label.bind("text", series, "valueSum");

内容的提问来源于stack exchange，提问作者إرتقاء