按月显示员工项目的条形图，但不显示是否有第二块

Question

这是 this 的延续，user2057925 非常棒地帮助了我，也给出了很好的解释。但是，由于与我发现问题之前所做的相比，我的 javascript 仍然非常基础，并且不知道如何解决。

所以条形图效果很好，但如果员工有 2 个不同的时间块用于一个项目，第一个（我假设）会在堆叠条形图中呈现。我有显示问题的屏幕截图。

图表

const labels = listEmployees.reduce(function(result, item) {
  result.push(item.name);
  return result;
}, []);

const randomColorGenerator = function () {
  return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};

const projects = listEmployees.reduce(function(result, item) {
  item.employeeProjects.forEach(function(prj){
    const prjId = prj.project.id;
    if (!result[prjId]) {
      result[prjId] = {
        label: prj.project.name,
        data: [],
        backgroundColor: randomColorGenerator()
      };
    }
  });
  return result;
}, {});

listEmployees.forEach(function(item) {
  for (const prjId of Object.keys(projects)) {
    const prj = projects[prjId];
    const empPrj = item.employeeProjects.filter(el => el.project.id === parseFloat(prjId));
    if (empPrj.length) {
      prj.data.push(empPrj[0].employeeBookedMonths);
    } else {
      prj.data.push(0);
    }
  }
});

const horizontalArbitraryLine = {
    id: 'horizontalArbitraryLine',
    beforeDraw(chart, args, options) {
        const {ctx, chartArea: {top, right, bottom, left, width, height}, scales:
        {x, y} } = chart;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.strokeRect(left, y.getPixelForValue(12), width, 1);

        console.log(y.getPixelForValue(3))
    }
};

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: Object.values(projects)
  },
  options: {
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  },
  plugins: [horizontalArbitraryLine]
});

所以你可以看到 Luke Sky 在最右边只有 3 个桩柱，但在控制台中有 4 个。 6.5 不见了。

我假设它与

prj.data.push(empPrj[0].employeeBookedMonths);

部分有关是否正确，因为它只获得该项目的第一个 employeeProjectBookedMonths？那么我们如何包括这两个部分呢？提前致谢。

更多数据截图