amCharts5 饼图数据标签显示原始值而非百分比-php教程-PHP中文网

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

碧海醫心

发布： 2025-10-02 15:08:01

原创

166人浏览过

amcharts5 饼图数据标签显示原始值而非百分比

本教程旨在指导用户如何在amCharts5饼图中，将数据标签从默认的百分比显示方式修改为显示原始数值。通过配置pieSeries.labels.template.setAll方法中的text属性，我们可以轻松地引用数据源中的特定字段，从而实现标签内容的定制化，提升图表的直观性和信息传递效率。

引言

amCharts5 是一款功能强大且高度可定制的 JavaScript 图表库。在创建饼图时，其默认行为通常是在每个扇区的标签中显示该扇区所占总量的百分比。这对于理解各部分占比非常有用。然而，在某些场景下，用户可能需要直接在标签中显示原始的数值数据，而不是其对应的百分比。例如，当图表代表具体的数量、金额或人口时，直接显示原始值可能更具信息量。

问题阐述

默认情况下，amCharts5 饼图的标签会显示每个扇区在总和中所占的百分比。用户面临的需求是：如何配置 amCharts5 饼图，使其数据标签显示原始的数值，而不是自动计算并显示的百分比。

解决方案

amCharts5 提供了灵活的模板机制来定制图表元素的显示。对于饼图的标签，我们可以通过访问 pieSeries.labels.template 并使用 setAll() 方法来修改其属性，特别是 text 属性。text 属性支持使用数据字段的占位符（例如 {value}、{category} 等），这些占位符会在渲染时被替换为实际的数据值。

要显示原始数据，我们需要将 text 属性设置为引用存储原始数值的数据字段。假设我们的数据对象中有一个名为 value 的字段用于表示每个扇区的原始数值，那么我们可以将 text 属性设置为 '{value}'。

以下是实现此功能的关键配置代码：

标书对比王

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

查看详情

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

登录后复制

在这个配置中：

radius: 控制标签相对于饼图中心的位置。
inside: 如果设置为 true，标签将显示在饼图扇区内部。
fontSize: 设置标签文本的字体大小。
text: 这是核心属性。'{value}' 表示标签将显示数据源中 value 字段的原始数值。如果你的数据字段名称是 count 或 amount，则相应地改为 '{count}' 或 '{amount}'。

示例代码

为了提供一个完整的示例，我们将创建一个简单的 amCharts5 饼图，并配置其标签以显示原始数值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>amCharts5 饼图显示原始值</title>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <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 series = root.container.children.push(
                am5percent.PieSeries.new(root, {
                    name: "Series",
                    categoryField: "category",
                    valueField: "value" // valueField 定义了扇区的大小
                })
            );

            // 设置数据
            series.data.setAll([
                { category: "市场A", value: 500 },
                { category: "市场B", value: 350 },
                { category: "市场C", value: 200 },
                { category: "市场D", value: 100 },
                { category: "市场E", value: 50 }
            ]);

            // 配置标签以显示原始值
            series.labels.template.setAll({
                radius: 25,       // 标签距离饼图中心的半径
                inside: true,     // 标签是否在饼图内部
                fontSize: 12,     // 字体大小
                fill: am5.color(0xffffff), // 标签字体颜色
                text: '{value}'   // 关键：显示原始的value值
            });

            // 配置工具提示（可选，但通常与标签一同定制）
            series.slices.template.setAll({
                tooltipText: "{category}: {value} ({valuePercentTotal.formatNumber('#.#')}%)"
            });

            // 添加图例
            var legend = root.container.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);
            root.appear();

        }); // end am5.ready()
    </script>
</body>
</html>

登录后复制

在上述代码中，我们创建了一个包含 category 和 value 字段的数据集。通过 series.labels.template.setAll({ text: '{value}' })，我们明确指示 amCharts5 在标签中显示 value 字段的原始数值。

注意事项

数据字段匹配： 确保 text 属性中使用的占位符（例如 {value}、{count}）与你的数据源中实际存储原始数值的字段名称完全匹配。如果你的数据字段是 amount，那么 text 属性应设置为 '{amount}'。
其他标签属性： labels.template.setAll 方法还可以用于定制标签的字体颜色 (fill)、背景 (background)、边框 (stroke)、位置 (centerX, centerY) 等。你可以根据需要进行进一步美化。
工具提示定制： 饼图通常还伴随有工具提示 (tooltips)。如果希望工具提示也显示原始值，或者同时显示原始值和百分比，你需要类似地配置 series.slices.template.setAll({ tooltipText: "{category}: {value} ({valuePercentTotal.formatNumber('#.#')}%)" })。{valuePercentTotal.formatNumber('#.#')}% 是 amCharts5 提供的一个特殊占位符，用于显示格式化后的百分比。
数据格式化： 如果原始数值需要特定的格式（例如货币符号、小数位数），可以使用 amCharts5 的格式化功能，例如 text: '{value.formatNumber("#,###.00")}'。

总结

通过简单地配置 am5percent.PieSeries 的 labels.template.setAll 方法中的 text 属性，amCharts5 允许开发者灵活地控制饼图标签的显示内容。无论是显示原始数值、百分比还是两者的组合，这种模板机制都提供了强大的定制能力，帮助用户创建更具表现力和信息量的图表。掌握这一技巧，将使你在使用 amCharts5 进行数据可视化时拥有更大的自由度。

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