amCharts5 饼图标签定制：显示原始数据值而非百分比

引言：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：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

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} 或任何其他您希望显示的字段名。

集成与注意事项

1. 数据源字段匹配：确保 text 属性中使用的占位符（例如 {count}）与您的数据源中实际存在的字段名完全匹配。如果字段名不匹配，标签将不会显示正确的数据。
2. 标签位置与可读性：当显示原始数值（尤其是较长的数字）时，标签可能会占用更多空间。
   • radius 和 inside 属性对于调整标签位置至关重要。如果标签过长，可以尝试将 inside 设置为 false，并调整 radius 使标签显示在饼图外部，避免重叠。
   • fontSize 也可以根据需要进行调整，以确保所有标签都能清晰显示。
3. 工具提示（Tooltip）：默认情况下，amCharts5 的工具提示也会显示百分比。如果您希望工具提示也显示原始数据，需要单独配置 pieSeries.slices.template.set("tooltipText", "...")，在其中使用相应的字段占位符。例如：

   pieSeries.slices.template.set("tooltipText", "{category}: {value} ({count})");

   登录后复制
4. 百分比与原始数据的选择：在设计图表时，需要根据您的目标受众和数据分析目的，决定是显示百分比还是原始数据。
   • 百分比：适合展示各部分在整体中的相对贡献或比例。
   • 原始数据：适合展示各部分的绝对数量或具体数值，尤其当这些数值本身具有重要意义时。
5. 其他标签定制：除了文本内容和位置，您还可以进一步定制标签的颜色 (fill)、背景 (background)、边框 (stroke) 等样式，以更好地融入您的应用界面。

总结

通过简单地修改 pieSeries.labels.template 中的 text 属性，amCharts5 提供了极大的灵活性，允许开发者根据具体需求定制饼图标签的显示内容。无论是显示原始数值、计数还是其他自定义信息，这种方法都能帮助您创建更具信息量和可读性的数据可视化图表，从而更有效地传达数据洞察。掌握这项技巧，将使您能够更好地利用 amCharts5 的强大功能，满足多样化的数据展示需求。

以上就是amCharts5 饼图标签定制：显示原始数据值而非百分比的详细内容，更多请关注php中文网其它相关文章！