引言：amCharts5 饼图标签的默认行为与定制需求
amCharts5 是一款功能强大的 JavaScript 图表库，其饼图组件在默认情况下通常会将数据标签显示为百分比形式，以直观地展示各部分在整体中的占比。然而，在许多实际应用场景中，用户可能需要直接在饼图切片上显示原始的数值、数量或任何其他相关数据，而非其对应的百分比。例如，一个销售部门可能希望看到每个产品类别售出的具体数量，而不是其在总销量中的百分比。本教程将详细介绍如何通过简单的配置，实现 amCharts5 饼图标签的这种定制化需求。
核心定制方法：修改饼图标签文本
要使 amCharts5 饼图标签显示原始数据而非百分比，关键在于配置 pieSeries 的 labels.template 属性。具体来说，我们需要修改 text 属性，使其引用数据源中包含原始数值的字段。
假设您的数据结构如下：
[
{ "category": "A", "value": 100, "count": 50 },
{ "category": "B", "value": 200, "count": 100 },
{ "category": "C", "value": 150, "count": 75 }
]如果您希望显示 count 字段的原始值，可以按照以下方式配置 pieSeries.labels.template：
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
// 1. 创建根元素
const root = am5.Root.new("chartdiv");
// 2. 设置主题
root.setThemes([
am5themes_Animated.new(root)
]);
// 3. 创建饼图
const chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalLayout
})
);
// 4. 创建饼图系列
const pieSeries = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value", // 饼图切片大小依据的字段
categoryField: "category" // 饼图切片分类依据的字段
})
);
// 5. 设置数据
pieSeries.data.setAll([
{ category: "One", value: 100, count: 50 },
{ category: "Two", value: 200, count: 100 },
{ category: "Three", value: 150, count: 75 }
]);
// 6. 核心：定制标签显示原始数据
pieSeries.labels.template.setAll({
radius: 25, // 标签与饼图中心的距离
inside: true, // 标签是否显示在切片内部
fontSize: 10, // 字体大小
text: '{count}' // 关键：使用数据字段 'count' 作为标签文本
});
// 7. 禁用默认的工具提示（如果不需要）
// pieSeries.slices.template.set("tooltipText", "{category}: {value} ({valuePercentTotal.formatNumber('#.#')}%)\n{count}");
// 8. 添加图例（可选）
const 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);代码解释：
- pieSeries.labels.template.setAll({}): 这是访问和修改所有饼图切片标签模板的关键方法。
- radius: 25: 设置标签距离饼图中心的半径，单位为像素。较大的值会将标签推向饼图边缘。
- inside: true: 将标签放置在饼图切片内部。如果设置为 false，标签将显示在切片外部。
- fontSize: 10: 设置标签文本的字体大小。
- text: '{count}': 这是实现目标的核心。 {count} 是一个占位符，它会告诉 amCharts5 从当前数据项中查找名为 count 的字段，并将其值作为标签文本显示。您可以根据您的数据结构，替换为 {value}、{category} 或任何其他您希望显示的字段名。
集成与注意事项
- 数据源字段匹配：确保 text 属性中使用的占位符（例如 {count}）与您的数据源中实际存在的字段名完全匹配。如果字段名不匹配，标签将不会显示正确的数据。
-
标签位置与可读性：当显示原始数值（尤其是较长的数字）时，标签可能会占用更多空间。
- radius 和 inside 属性对于调整标签位置至关重要。如果标签过长，可以尝试将 inside 设置为 false，并调整 radius 使标签显示在饼图外部，避免重叠。
- fontSize 也可以根据需要进行调整，以确保所有标签都能清晰显示。
-
工具提示（Tooltip）：默认情况下，amCharts5 的工具提示也会显示百分比。如果您希望工具提示也显示原始数据，需要单独配置 pieSeries.slices.template.set("tooltipText", "...")，在其中使用相应的字段占位符。例如：
pieSeries.slices.template.set("tooltipText", "{category}: {value} ({count})"); -
百分比与原始数据的选择：在设计图表时，需要根据您的目标受众和数据分析目的，决定是显示百分比还是原始数据。
- 百分比：适合展示各部分在整体中的相对贡献或比例。
- 原始数据：适合展示各部分的绝对数量或具体数值，尤其当这些数值本身具有重要意义时。
- 其他标签定制：除了文本内容和位置，您还可以进一步定制标签的颜色 (fill)、背景 (background)、边框 (stroke) 等样式，以更好地融入您的应用界面。
总结
通过简单地修改 pieSeries.labels.template 中的 text 属性，amCharts5 提供了极大的灵活性，允许开发者根据具体需求定制饼图标签的显示内容。无论是显示原始数值、计数还是其他自定义信息，这种方法都能帮助您创建更具信息量和可读性的数据可视化图表，从而更有效地传达数据洞察。掌握这项技巧，将使您能够更好地利用 amCharts5 的强大功能，满足多样化的数据展示需求。
