AmCharts 4甘特图如何基于任务名称调用ColorSet实现统一配色

该需求有成熟的可行实现方案，核心逻辑是通过任务名称-颜色映射缓存复用同名称任务的配色，无需修改原始数据集属性，完全基于am4core.ColorSet分配颜色。

实现步骤 #

1. 提前初始化全局颜色集与映射缓存

// 初始化AmCharts内置颜色集
const colorSet = new am4core.ColorSet();
// 建立任务名称到颜色的全局映射缓存
const taskColorMap = new Map();

2. 给甘特图任务条模板绑定初始化事件，自动匹配颜色
   在你当前使用的甘特图demo的series配置段中，加入以下代码即可生效：

series.columns.template.events.on("inited", function(event) {
  // 获取当前渲染任务的名称
  const currentTaskName = event.target.dataItem.dataContext.name;
  // 缓存中无对应配色时从ColorSet获取新颜色存入
  if (!taskColorMap.has(currentTaskName)) {
    taskColorMap.set(currentTaskName, colorSet.next());
  }
  // 给当前任务条赋值统一配色
  event.target.fill = taskColorMap.get(currentTaskName);
  // 可选：同步任务条边框、悬停状态的配色
  event.target.stroke = taskColorMap.get(currentTaskName);
  const hoverState = event.target.states.create("hover");
  hoverState.properties.fill = taskColorMap.get(currentTaskName).lighten(-0.2);
});

可选配置：固定指定任务的配色 #

如果需要强制让「需求收集」固定为黄色、「制定规格」固定为蓝色这类规则，可在初始化缓存时提前预设映射：

taskColorMap.set("Gathering requirements（需求收集）", am4core.color("#fdd400"));
taskColorMap.set("Producing specifications（制定规格）", am4core.color("#2483d7"));
// 其余未预设的任务依然会自动从ColorSet中分配不重复的颜色

效果说明 #

• 同名称的任务无论归属哪个分类，都会命中同一个缓存配色，保证全局统一
• 无需给原始数据集添加任何颜色属性，所有配色逻辑在渲染层自动完成
• 支持自定义ColorSet的内置配色列表，调整全局配色风格

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