如何为AM5饼图设置自定义颜色？

要给AM5饼图设置指定的红、绿、蓝、黄、橙颜色，只需为饼图系列创建自定义ColorSet并覆盖默认颜色配置即可，以下是修改后的完整代码：

<!DOCTYPE html>
<html>
  
  <body>
    <div id="chartdiv"></div>
    <script src="index_am.js"></script>
    <script src="percent.js"></script>
    <script src="Animated.js"></script>
    <script src="index.js"></script>

    <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, {
                  startAngle: 160, endAngle: 380
              })
            );

            // 创建饼图系列
            var series1 = chart.series.push(
              am5percent.PieSeries.new(root, {
                  startAngle: 160,
                  endAngle: 380,
                  valueField: "bottles",
                  innerRadius: am5.percent(80),
                  categoryField: "Rating"
              })
            );

            // --------------------------
            // 自定义饼图颜色集：红、绿、蓝、黄、橙
            // --------------------------
            var customColorSet = am5.ColorSet.new(root, {
                colors: [
                    am5.color("#ff0000"), // 红色
                    am5.color("#00ff00"), // 绿色
                    am5.color("#0000ff"), // 蓝色
                    am5.color("#ffff00"), // 黄色
                    am5.color("#ffa500")  // 橙色
                ]
            });
            series1.set("colors", customColorSet);

            series1.ticks.template.set("forceHidden", true);
            series1.labels.template.set("forceHidden", true);

            var label = chart.seriesContainer.children.push(
              am5.Label.new(root, {
                  textAlign: "center",
                  centerY: am5.p100,
                  centerX: am5.p50,
                  text: "[fontSize:18px]total[/]:\n[bold fontSize:30px]1647.9[/]"
              })
            );

            var data = [
              {
                  Rating: "A",
                  bottles: 1500,
              },
              {
                  Rating: "B",
                  bottles: 990
              },
              {
                  Rating: "C",
                  bottles: 785
              },
              {
                  Rating: "D",
                  bottles: 255
              },
              {
                  Rating: "E",
                  bottles: 452
              },
            ];

            // 绑定数据
            series1.data.setAll(data);

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

关键说明 #

• AM5饼图的系列颜色由ColorSet对象管理，创建自定义ColorSet时通过colors数组指定需要的颜色值，颜色顺序会和数据数组的顺序一一对应
• 确保颜色数组的长度与数据项数量一致，这里5个数据项对应5种颜色，刚好匹配

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