Chart.js堆叠柱状图：项目标签、颜色及同项目多段数据展示问题

针对你遇到的项目名称作为数据集标签、差异化颜色、同一员工同一项目多段数据展示的问题，以下是具体的代码修改方案：

1. 数据预处理（核心步骤） #

首先需要对Spring Boot返回的employees数据做聚合处理，提取唯一项目列表，并将同一员工同一项目的多段时长记录求和，确保数据适配堆叠柱状图的结构。

假设后端返回的原始数据格式如下：

const rawEmployees = [
  {
    name: "张三",
    projects: [
      { projectName: "项目A", duration: 10 },
      { projectName: "项目B", duration: 5 },
      { projectName: "项目A", duration: 8 } // 同一项目多段记录
    ]
  },
  {
    name: "李四",
    projects: [
      { projectName: "项目A", duration: 12 },
      { projectName: "项目C", duration: 7 }
    ]
  }
];

执行数据转换：

// 提取所有唯一项目名称
const allProjects = [...new Set(rawEmployees.flatMap(emp => emp.projects.map(p => p.projectName)))];

// 提取员工姓名作为X轴标签
const employeeLabels = rawEmployees.map(emp => emp.name);

// 为每个项目生成对应数据集
const datasets = allProjects.map((project, index) => {
  // 生成差异化颜色（也可自定义固定颜色映射表，更可控）
  const bgColor = `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 0.7)`;
  const borderColor = bgColor.replace('0.7', '1');

  // 聚合每个员工在当前项目的总时长
  const projectData = rawEmployees.map(emp => {
    const matchedRecords = emp.projects.filter(p => p.projectName === project);
    return matchedRecords.reduce((total, record) => total + record.duration, 0);
  });

  return {
    label: project, // 将项目名称设为数据集标签
    data: projectData,
    backgroundColor: bgColor,
    borderColor: borderColor,
    borderWidth: 1
  };
});

2. 初始化堆叠柱状图 #

配置Chart.js的堆叠模式，确保X轴为员工姓名，Y轴为时长，开启堆叠渲染：

<canvas id="employeeProjectChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 上述数据预处理代码需放在此处

const chartCtx = document.getElementById('employeeProjectChart').getContext('2d');
new Chart(chartCtx, {
  type: 'bar',
  data: {
    labels: employeeLabels,
    datasets: datasets
  },
  options: {
    responsive: true,
    scales: {
      x: {
        stacked: true,
        title: {
          display: true,
          text: '员工姓名'
        }
      },
      y: {
        stacked: true,
        title: {
          display: true,
          text: '项目时长'
        },
        beginAtZero: true
      }
    },
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '员工项目时长分布'
      }
    }
  }
});
</script>

关键问题解决说明 #

• 项目名称作为数据集标签：通过遍历唯一项目列表，将项目名称直接赋值给数据集的label属性，图表图例会自动展示对应项目名称。
• 差异化颜色：为每个项目生成随机RGB背景色（也可自定义projectColors映射表，比如{"项目A": "#FF6384", "项目B": "#36A2EB"}，实现固定颜色匹配）。
• 同一项目多段数据展示：使用reduce方法将同一员工同一项目的多条时长记录求和，确保每个员工在对应项目的数据集里显示总时长，解决多段数据未正确聚合的问题。

若需保留同一项目的多段记录单独堆叠（如区分项目阶段），可修改数据处理逻辑，给每个项目段添加唯一标识后缀（比如"项目A-阶段1"），再生成对应数据集即可。

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