am5charts饼中饼(Pie of Pie)如何将图例文字颜色修改为红色

问题背景 #

• 开发场景：基于am5charts实现饼中饼（Pie of Pie）图表，页面使用深色背景
• 已实现效果：通过配置am5.Line的stroke属性，成功将引导线颜色修改为白色
• 待解决问题：需要将图例/标注文字修改为红色，不清楚对应配置属性

当前已有的引导线修改代码：

var line0 = container.children.push(
  am5.Line.new(root, {
    position: "absolute",
    stroke: root.interfaceColors.get("text"),
    strokeDasharray: [2, 2],
    stroke: am5.color(0xFFFFFF), // 已配置引导线为白色
  })
); 

配置方法 #

am5charts中文字类组件（Label）的颜色不通过stroke属性控制，需要使用fill属性配置，根据要修改的文字类型对应配置即可：

• 修改底部图例文字颜色
  图例初始化完成后，针对图例的标签模板统一设置填充色：

  // 图例初始化代码（原有逻辑保留）
  const legend = chart.children.push(am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50,
    y: am5.percent(100),
    marginTop: 15
  }));
  // 新增配置：设置图例文字为红色
  legend.labels.template.setAll({
    fill: am5.color(0xff0000)
  });
  legend.data.setAll(chart.series.values);
  

• 修改饼图扇区旁的标注文字颜色
  如果要修改的是扇区外侧跟着引导线的标注文字，直接在饼图序列上配置标签模板：

  const pieSeries = chart.series.push(am5percent.PieSeries.new(root, {
    // 原有饼图配置项保留，比如name、value字段、半径等
  }));
  // 新增配置：设置扇区标注文字为红色
  pieSeries.labels.template.setAll({
    fill: am5.color(0xff0000)
  });
  // 引导线推荐直接在序列的ticks模板配置，不需要单独创建Line实例
  pieSeries.ticks.template.setAll({
    stroke: am5.color(0xffffff),
    strokeDasharray: [2, 2]
  });
  

提示：你当前代码中重复定义了两次stroke属性，后面的配置会覆盖前面对接口色的读取，属于冗余写法。如果是修改饼图自带的引导线，直接修改序列ticks.template的配置即可，不需要额外新增Line元素。

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