amCharts5 饼图标签自定义：显示实际数值而非百分比-php教程-PHP中文网

amCharts5 饼图标签自定义：显示实际数值而非百分比

碧海醫心

发布： 2025-10-02 12:54:11

原创

434人浏览过

amcharts5 饼图标签自定义：显示实际数值而非百分比

本教程旨在指导用户如何在 amCharts5 饼图中自定义标签，使其显示实际的原始数据值，而非默认的百分比表示。通过修改 pieSeries.labels.template 配置，用户可以轻松实现饼图标签的数据展示方式，提升数据解读的直观性。

引言

在数据可视化领域，饼图是展示部分与整体关系常用且直观的图表类型。amCharts5 作为一款功能强大的图表库，提供了丰富的自定义选项。默认情况下，amCharts5 饼图的标签通常显示各部分的百分比。然而，在某些业务场景中，用户可能更倾向于直接查看原始的数值数据，而非经过计算的百分比。例如，在展示销售额、用户数量或库存量时，直接显示具体的数值往往比百分比更具信息量和实用性。本教程将详细介绍如何在 amCharts5 饼图中实现这一需求，将标签内容从百分比切换为实际的原始数据。

理解 amCharts5 饼图标签

amCharts5 提供了高度灵活的标签自定义机制。对于饼图，其核心在于 PieSeries 对象的 labels 属性，特别是 labels.template。template 允许我们定义所有标签的通用样式和内容。通过修改 labels.template 的 text 属性，我们可以控制标签显示什么内容。默认情况下，text 属性可能包含 {valuePercentTotal.formatNumber('#.#')}% 这样的占位符，用于显示百分比。要显示原始数据，我们需要将其替换为指向数据源中实际数值字段的占位符。

核心操作：显示原始数据而非百分比

要将饼图标签从百分比更改为原始数据，关键在于调整 pieSeries.labels.template.setAll() 方法中的 text 属性。

识别数据字段： 首先，您需要知道在您的饼图数据中，哪个字段存储了您希望在标签中显示的原始数值。例如，如果您的数据结构是 [{ category: 'A', value: 100 }, { category: 'B', value: 200 }]，那么您希望显示的就是 value 字段。
修改 text 属性： 将 text 属性设置为 {您的数据字段名}。例如，如果您的数据字段名为 value，则设置为 text: '{value}'。amCharts5 会自动从每个数据项中提取对应字段的值并显示。

以下是实现这一目标的关键代码片段：

pieSeries.labels.template.setAll({
  radius: 25, // 标签距离饼图中心的半径
  inside: true, // 标签是否在饼图内部
  fontSize: 10, // 字体大小
  text: '{value}' // 关键：将标签内容设置为数据源中的 'value' 字段
});

登录后复制

在这个例子中，{value} 会被替换为每个饼图切片对应的 value 数据。如果您在数据中使用了不同的字段名（例如 count、amount 等），请相应地替换 {value} 为 {count} 或 {amount}。

实战示例：自定义饼图标签

为了提供一个完整的上下文，我们将创建一个简单的 amCharts5 饼图，并展示如何配置其标签以显示原始数据。

HTML 结构：

标书对比王

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

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>amCharts5 饼图显示原始数据</title>
    <!-- 引入 amCharts5 核心库 -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <!-- 引入 amCharts5 饼图模块 -->
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <!-- 引入 amCharts5 主题 -->
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="chartdiv"></div>

    <script>
        am5.ready(function() {

            // 创建根元素
            var root = am5.Root.new("chartdiv");

            // 设置主题
            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            // 创建饼图系列
            var chart = root.container.children.push(
                am5percent.PieChart.new(root, {
                    layout: root.verticalLayout
                })
            );

            // 创建饼图系列数据
            var series = chart.series.push(
                am5percent.PieSeries.new(root, {
                    valueField: "value", // 数据值字段
                    categoryField: "category" // 分类字段
                })
            );

            // 设置数据
            series.data.setAll([
                { category: "类别 A", value: 250 },
                { category: "类别 B", value: 180 },
                { category: "类别 C", value: 120 },
                { category: "类别 D", value: 90 },
                { category: "类别 E", value: 60 }
            ]);

            // 配置饼图标签以显示原始数据
            series.labels.template.setAll({
                radius: 25,
                inside: true, // 标签位于饼图内部
                fontSize: 12,
                fill: am5.color(0xffffff), // 标签字体颜色
                text: "{value}" // 核心：显示数据源中的 'value' 字段
            });

            // 禁用默认的百分比工具提示（如果需要）
            // series.slices.template.set("tooltipText", "{category}: {value}");

            // 添加图例
            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);

        });
    </script>
</body>
</html>

登录后复制

在上述代码中，最关键的部分是：

series.labels.template.setAll({
    // ... 其他样式设置
    text: "{value}" // 将此处的 "value" 替换为您数据中实际的数值字段名
});

登录后复制

通过将 text 属性设置为 {value}，我们指示 amCharts5 在每个饼图切片的标签上显示其对应的 value 字段的值，而非默认的百分比。

注意事项与进阶

数据字段匹配： 务必确保 {} 内的字段名（例如 {value}）与您在 series.data.setAll() 中提供的数据对象中的属性名完全一致。如果数据字段名为 amount，则应写为 text: "{amount}"。
标签布局与可读性：
- radius： 控制标签距离饼图中心的距离。较小的 radius 会使标签更靠近中心，较大的 radius 则使其更靠近边缘。
- inside： 设置为 true 时，标签会显示在饼图切片内部；设置为 false 时，则显示在外部。外部标签通常需要额外的引导线（可以通过 series.ticks.template 配置）。
- fontSize 和 fill： 调整字体大小和颜色以确保标签在图表背景上清晰可见。
- 标签重叠： 当饼图切片数量多、值接近或标签内容较长时，标签可能会重叠。amCharts5 提供了一些自动避免重叠的机制，但您可能需要手动调整 radius、fontSize 或考虑将部分标签放置在外部。

数值格式化： 如果您希望原始数值以特定的格式显示（例如，添加千位分隔符、货币符号或限制小数位数），可以使用 numberFormatter。例如：

series.labels.template.setAll({
    // ...
    text: "{value}",
    numberFormat: "#,###.00" // 示例：显示千位分隔符，保留两位小数
});

登录后复制

或者更灵活地使用 root.numberFormatter：

root.numberFormatter.set("numberFormat", "#,###.00");
series.labels.template.setAll({
    // ...
    text: "{value}" // 此时会应用全局格式化
});

登录后复制

工具提示 (Tooltips) 的自定义： 饼图的工具提示（鼠标悬停时显示的信息）也可以类似地自定义。如果您希望工具提示也显示原始数据而非百分比，可以配置 series.slices.template.set("tooltipText", "{category}: {value}");。

总结

通过简单地修改 pieSeries.labels.template.setAll() 方法中的 text 属性，将其指向数据源中存储原始数值的字段（例如 text: "{value}"），您可以轻松地将 amCharts5 饼图的标签从默认的百分比显示更改为实际的原始数据。结合 radius、inside、fontSize 等属性的调整，以及对数值格式化的运用，您可以创建出既美观又符合特定数据展示需求的饼图。这种灵活性使得 amCharts5 成为构建专业数据可视化应用的强大工具。

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