Amcharts树形图自定义矩形节点动态着色问题求助

问题原因分析 #

你遇到的target.dataItem为undefined，是因为在设置矩形颜色的逻辑中，你误将矩形元素本身当成了LinkedHierarchyNode——实际上当你在矩形的adapter或事件中获取到的target是矩形对象，而非树形图的节点，自然无法直接拿到dataItem。

解决方案代码 #

以下是完整的实现步骤，包含隐藏默认圆形节点、添加矩形节点、动态绑定颜色的逻辑：

1. 隐藏默认圆形节点

// 假设series是你的树形图系列实例
series.nodes.template.set("visible", false);

2. 创建矩形节点模板并绑定到树形图节点

const root = am5.Root.new("chartdiv");
// ... 其他初始化代码（创建series、设置数据等）

// 创建矩形模板
const rectTemplate = am5.Rectangle.new(root, {
  width: 35, // 自定义矩形宽高
  height: 25,
  cornerRadius: 4 // 可选：添加圆角
});

// 将矩形作为子元素绑定到每个树形节点
series.nodes.template.set("children", [rectTemplate]);

3. 通过父节点关联数据，实现动态着色
   使用adapter为矩形动态设置填充色，通过矩形的parent属性获取对应的LinkedHierarchyNode，再读取其dataItem中的颜色字段：

rectTemplate.adapters.add("fill", function(fill, target) {
  const node = target.parent;
  // 确保节点和数据存在时才设置颜色
  if (node && node.dataItem && node.dataItem.dataContext.color) {
    return am5.color(node.dataItem.dataContext.color);
  }
  // fallback默认颜色
  return fill || am5.color("#999");
});

额外验证点 #

• 确认你的数据结构中，每个节点对象都包含color字段，格式与官方示例一致：

const data = {
  name: "总节点",
  color: "#2c3e50",
  children: [
    {
      name: "子节点1",
      color: "#3498db"
    },
    {
      name: "子节点2",
      color: "#e74c3c"
    }
  ]
};

内容的提问来源于stack exchange，提问作者diabeetus-fairy