如何为Fetch API获取的分类数据对象添加颜色字段用于柱状图？

解决方案：使用分类-颜色映射表处理数据 #

核心思路是先定义固定的分类与颜色对应关系，在获取后端数据后，遍历数据给每个对象添加对应的color字段。

1. 定义分类颜色映射表 #

创建一个映射对象集中管理分类与颜色的绑定关系，后续新增分类直接扩展即可：

// 集中管理分类与对应颜色
const categoryColorMap = {
  CAHS: "purple",
  CEIS: "green",
  // 新增分类时直接添加键值对，例如：
  // ENGINE: "blue",
  // MEDICINE: "red"
};

2. 修改数据获取逻辑 #

在请求到数据后，通过map方法遍历原数据，为每个对象添加color字段：

const [topDepartment, setTopDepartment] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  const getTopDepartment = async () => { 
    try {
      const res = await publicRequest.get(`/order/departments`);
      // 处理数据，给每个项添加color字段
      const updatedData = res.data.map(item => ({
        ...item,
        // 从映射表取对应颜色，无匹配时用灰色兜底
        color: categoryColorMap[item.category] || "#cccccc"
      }));
      setTopDepartment(updatedData);
      setLoading(false);
    } catch (error) {
      console.error("获取部门数据出错:", error); // 避免空catch，便于调试
    }
  };
  getTopDepartment();
}, []); // useState的set函数是稳定引用，无需加入依赖项

额外说明 #

• 映射表方式易于维护，所有配色规则集中管理，调整或新增分类只需修改映射表
• 兜底颜色避免了分类无匹配颜色时的异常情况
• 扩展运算符...item保留原数据所有字段，仅新增color字段，不影响原有业务逻辑

如果分类数量不固定且需要动态生成专属颜色，可使用随机颜色生成函数：

// 生成随机十六进制颜色
const getRandomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// 使用时替换color取值：
color: categoryColorMap[item.category] || getRandomColor()

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