如何对AmCharts百分比饼图中的百分比数字进行格式化取整？

你遇到的问题核心在于：饼图的百分比数值使用独立的格式化逻辑，不是普通的numberFormatter，所以直接给系列或全局设置numberFormatter不会生效。以下是几种可行的解决方法：

方法1：给系列配置percentFormatter #

直接在PieSeries的参数中指定percentFormatter，专门用于处理百分比数值的格式化：

var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category",
  // # 代表取整，也可根据需求调整为其他格式
  percentFormatter: am5.NumberFormatter.new(root, { numberFormat: "#" })
}));

方法2：在标签文本中直接指定格式化规则 #

通过修改labelText，在模板字符串里直接对percent字段应用格式化规则：

var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category",
  // 直接在标签文本中定义百分比格式
  labelText: "{category}: {percent.formatNumber('#')}%"
}));

方法3：给标签模板单独设置格式化器 #

如果需要更精细的控制，可以给系列的标签模板单独配置numberFormatter：

var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category"
}));

// 为标签模板设置百分比格式化规则
series.labels.template.set("numberFormatter", am5.NumberFormatter.new(root, { 
  numberFormat: "#" 
}));

修改后的完整代码 #

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<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>

<!-- Chart code -->
<script>
am5.ready(function() {

// Create root element
var root = am5.Root.new("chartdiv");

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);

// Create chart
var chart = root.container.children.push(am5percent.PieChart.new(root, {
  layout: root.verticalLayout
}));

// Create series - 使用方法1的配置实现百分比取整
var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category",
  percentFormatter: am5.NumberFormatter.new(root, { numberFormat: "#" })
}));

// Set data
series.data.setAll([
  { value: 10, category: "One" },
  { value: 9, category: "Two" },
  { value: 6, category: "Three" },
  { value: 5, category: "Four" },
  { value: 4, category: "Five" },
  { value: 3, category: "Six" },
  { value: 1, category: "Seven" },
]);

// Play initial series animation
series.appear(1000, 100);

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

<!-- HTML -->
<div id="chartdiv"></div>

内容的提问来源于stack exchange，提问作者Hokascha