如何为Amcharts5饼图的每个扇区设置背景色？

问题说明 #

我当前有一个Amcharts5饼图，希望为每个饼图扇区设置对应背景色，已在每个数据项中添加了pieBgColor字段存储对应颜色值，但不清楚如何调用该字段，以下是我的原始代码：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Distribution</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
    <!-- Amcharts -->
        <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <!-- //Amcharts -->

    <!-- Chart code :: Distribution -->
    <script>
        am5.ready(function() {
            
            // Create root and chart
            var root = am5.Root.new("chartdiv_distribution");
    
            root.setThemes([
              am5themes_Animated.new(root)
            ]);
            
            var chart = root.container.children.push(
              am5percent.PieChart.new(root, {})
            );
        
        
            
            // Define data
            var data = [{
              country: "Europa",
              sales: 42,
              pieBgColor: "#0d7300"
            }, {
              country: "USA",
              sales: 13,
              pieBgColor: "#004f73"
            }, {
              country: "Asia",
              sales: 2,
              pieBgColor: "#999937"
            }, {
              country: "Other",
              sales: 6,
              pieBgColor: "#99378c"
            }];
        
            // Create series
            var series = chart.series.push(
              am5percent.PieSeries.new(root, {
                name: "Series",
                valueField: "sales",
                categoryField: "country",
                alignLabels: false
              })
            );
        
            series.data.setAll(data);
            
          series.labels.template.setAll({
                fontSize: 12,
                text: "{category}",
                textType: "radial",
                radius: 0,
                centerX: am5.percent(100),
                fill: am5.color(0xffffff)
            })
        }); // end am5.ready()
    </script>

    <div id="chartdiv_distribution" style="width: 100%;min-height: 400px;"></div>

    <!-- //Chart code :: Distribution -->
</body>
</html>

解决方案 #

要实现每个饼图扇区使用自定义背景色，需要配置饼图系列的扇区模板（slices.template），而非标签模板。直接通过数据绑定读取pieBgColor字段的值即可。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Distribution</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
    <!-- Amcharts -->
        <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
      <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <!-- //Amcharts -->

    <!-- Chart code :: Distribution -->
    <script>
        am5.ready(function() {
            
            // Create root and chart
            var root = am5.Root.new("chartdiv_distribution");
    
            root.setThemes([
              am5themes_Animated.new(root)
            ]);
            
            var chart = root.container.children.push(
              am5percent.PieChart.new(root, {})
            );
        
        
            
            // Define data
            var data = [{
              country: "Europa",
              sales: 42,
              pieBgColor: "#0d7300"
            }, {
              country: "USA",
              sales: 13,
              pieBgColor: "#004f73"
            }, {
              country: "Asia",
              sales: 2,
              pieBgColor: "#999937"
            }, {
              country: "Other",
              sales: 6,
              pieBgColor: "#99378c"
            }];
        
            // Create series
            var series = chart.series.push(
              am5percent.PieSeries.new(root, {
                name: "Series",
                valueField: "sales",
                categoryField: "country",
                alignLabels: false
              })
            );
        
            series.data.setAll(data);

            // 设置扇区背景色，读取数据中的pieBgColor字段
            series.slices.template.setAll({
                fill: "{pieBgColor}"
            });
            
          series.labels.template.setAll({
                fontSize: 12,
                text: "{category}",
                textType: "radial",
                radius: 0,
                centerX: am5.percent(100),
                fill: am5.color(0xffffff)
            })
        }); // end am5.ready()
    </script>

    <div id="chartdiv_distribution" style="width: 100%;min-height: 400px;"></div>

    <!-- //Chart code :: Distribution -->
</body>
</html>

关键说明 #

• series.slices.template.setAll({ fill: "{pieBgColor}" })：通过Amcharts的数据绑定语法，直接将每个扇区的填充色绑定到对应数据项的pieBgColor字段
• 如果需要更灵活的颜色处理（比如转换颜色格式），也可以使用适配器函数：

series.slices.template.adapters.add("fill", function(fill, target) {
  const dataItem = target.dataItem;
  if (dataItem) {
    // 将十六进制字符串转为Amcharts颜色对象
    return am5.color(dataItem.dataContext.pieBgColor);
  }
  return fill;
});

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