核心概念：amCharts5 标签自定义机制
amcharts5的设计哲学强调高度可配置性。对于饼图而言，每个切片的数据标签（label）都可以通过pieseries.labels.template进行精细化控制。template对象允许我们定义所有标签的通用样式和内容规则，从而实现统一且灵活的视觉呈现。
实现步骤：显示原始数值
要将饼图标签从百分比切换为原始数值，核心在于修改pieSeries.labels.template的text属性。text属性支持使用数据字段占位符，这些占位符将直接从您提供给图表的数据源中提取相应的值。
假设您的数据源中包含一个名为value或count的字段，存储了每个切片的原始数值。您可以通过以下代码片段来实现标签的自定义显示：
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
// 1. 创建 Root 元素
let root = am5.Root.new("chartdiv"); // "chartdiv" 是您的HTML容器ID
// 2. 创建 Chart 容器
let chart = root.container.children.push(
am5percent.Pie.new(root, {
layout: root.verticalLayout
})
);
// 3. 创建 PieSeries
let pieSeries = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value", // 指定数据中包含原始数值的字段名
categoryField: "category",
alignLabels: false // 可选：控制标签对齐方式
})
);
// 4. 设置数据
pieSeries.data.setAll([
{ category: "一月", value: 100 },
{ category: "二月", value: 250 },
{ category: "三月", value: 150 },
{ category: "四月", value: 300 }
]);
// 5. 核心配置：自定义标签显示
pieSeries.labels.template.setAll({
radius: 25, // 标签到饼图中心的距离
inside: true, // 标签是否显示在饼图内部
fontSize: 10, // 字体大小
text: '{value}' // 关键：将这里改为您的原始数据字段名
});
// 6. 可选：设置 Tooltip 提示
pieSeries.slices.template.set("tooltipText", "{category}: {value} ({valuePercentTotal.formatNumber('#.#')}%){name}");
// 7. 添加图例 (可选)
let legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(pieSeries.dataItems);
// 8. 动画 (可选)
pieSeries.appear(1000, 100);
chart.appear(1000, 100);在上述代码中，text: '{value}'是关键所在。它告诉amCharts5，每个标签的内容应该直接取自数据项中valueField所对应的字段值。如果您的数据字段名为count，则应写成text: '{count}'。
其他属性如radius（标签到饼图中心的距离）、inside（标签是否在饼图内部）和fontSize（字体大小）可以根据您的设计需求进行调整，以确保标签的清晰度和美观性。alignLabels: false可以防止标签在外部对齐，当inside: true时通常更合适。
数据字段映射
请务必确保text属性中使用的占位符（例如{value}或{count}）与您在pieSeries中通过valueField指定的数据字段名称一致，并且该字段在您的数据源中确实包含了需要显示的原始数值。如果字段名不匹配，标签将无法正确显示数据。
注意事项与最佳实践
- 数据准确性：确保提供给图表的数据源中包含正确的原始数值字段，且其数据类型适合显示。
- 可读性优化：当显示原始数值时，如果数值差异较大或标签过多，可能会导致重叠或难以阅读。可以通过调整radius、inside、fontSize以及labels.template.set("forceHidden", true)（在必要时隐藏部分标签）等属性来优化显示效果。对于外部标签，labels.template.set("textType", "radial")有时也能改善可读性。
- 结合其他信息：您也可以在text属性中结合多个数据字段或静态文本，例如text: '{category}: {value}'来显示类别和数值，或者text: '数量: {value}'。
- Tooltip提示：即使标签显示原始数值，也可以考虑在tooltip.label.set("text", "{category}: {value} ({valuePercentTotal.formatNumber('#.#')}%")中保留百分比信息，以便用户在悬停时获取更全面的数据洞察。这为用户提供了两种不同的数据视角。
- 动态格式化：对于数值，amCharts5也支持通过numberFormat等属性进行格式化，例如显示货币符号、千位分隔符或限制小数位数。例如，text: '{value.formatNumber("#,###.00")}'可以格式化为带千位分隔符和两位小数的数值。
总结
通过对pieSeries.labels.template.setAll()中text属性的简单配置，amCharts5饼图能够灵活地从默认的百分比显示切换到原始数值显示。这种自定义能力极大地增强了图表的数据表达力，帮助开发者根据具体场景需求，提供更直观、更精准的数据可视化体验。记住，关键在于正确映射数据字段并根据视觉效果调整其他标签属性，以达到最佳的用户体验。
