如何在Chart.js中按开发者条件设置柱状图背景色

要实现根据开发者名称设置柱状条颜色，你可以通过以下步骤修改代码：

1. 定义开发者-颜色映射表 #

先创建一个对象，把每个开发者和对应的颜色绑定，方便后续快速查找：

const devColorMap = {
  John: '#f38b4a',
  Alex: '#56d798',
  Bob: '#6970d5'
};

2. 动态生成背景色数组 #

修改backgroundColor的赋值逻辑，遍历每一条数据，根据当前数据的developer字段匹配对应的颜色。同时注意你的lines字段是数组类型，需要取其中的数值作为图表数据：

完整修改后的代码 #

import { Chart } from "chart.js/auto";

(async function () {
const data = [
{
  filename: "center.js",
  developer: ["John"],
  lastedit: "01-01-2022",
  lines: [40],
 },
 {
  filename: "collide.js",
  developer: ["Alex"],
  lastedit: "15-02-2022",
  lines: [70],
  },
  {
  filename: "constant.js",
  developer: ["Bob"],
  lastedit: "25-02-2022",
  lines: [10],
  },
  {
  filename: "index.js",
  developer: ["Alex"],
  lastedit: "17-03-2022",
  lines: [8],
  },
  {
  filename: "jiggle.js",
  developer: ["Bob"],
  lastedit: "19-03-2022",
  lines: [5],
  },
  {
  filename: "link.js",
  developer: ["Bob", "Alex", "John"],
  lastedit: "29-03-2022",
  lines: [120],
  },
  {
  filename: "manyBody.js",
  developer: ["Bob", "John"],
  lastedit: "09-04-2022",
  lines: [180],
  },
  {
  filename: "simulation.js",
  developer: ["Alex", "Bob", "John"],
  lastedit: "01-05-2022",
  lines: [140],
  },
  {
  filename: "x.js",
  developer: ["Bob"],
  lastedit: "03-05-2022",
  lines: [80],
  },
];

// 定义开发者与颜色的映射关系
const devColorMap = {
  John: '#f38b4a',
  Alex: '#56d798',
  Bob: '#6970d5'
};

new Chart(document.getElementById("acquisitions"), {
  type: "bar",
  data: {
    labels: data.map((row) => row.lastedit),
    datasets: [
    {
      label: "代码量",
      // 修正lines字段的取值，从数组转为数值
      data: data.map((row) => row.lines[0]),
      // 动态生成每个柱子的背景色
      backgroundColor: data.map(row => {
        // 单个开发者的情况，直接取对应颜色
        if (row.developer.length === 1) {
          return devColorMap[row.developer[0]];
        }
        // 多个开发者的情况，可自定义策略，比如取第一个开发者的颜色
        // 也可以改为半透明叠加色，来体现多人协作
        return devColorMap[row.developer[0]];
      }),
    },
    ],
   },
   });
})();

3. 多开发者场景的可选处理 #

如果遇到多个开发者协作的条目（比如link.js有3位开发者），你可以根据需求调整颜色策略：

• 取第一个开发者的颜色（如示例代码）
• 使用半透明的混合色，比如将基础颜色调整透明度：

  backgroundColor: data.map(row => {
    if (row.developer.length === 1) {
      return devColorMap[row.developer[0]];
    }
    // 将HEX颜色转为半透明RGBA
    const baseColor = devColorMap[row.developer[0]];
    const hexToRgb = baseColor.slice(1).match(/.{2}/g).map(x => parseInt(x, 16));
    return `rgba(${hexToRgb.join(',')}, 0.6)`;
  })
  

• 自定义统一的协作色，比如'#cccccc'表示多人编辑的条目

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