Chart.js水平堆叠柱状图异常：仅显示部分数据集

你的问题源于三个核心问题：moment对象的可变特性导致时间计算错误、时间轴适配器缺失、堆叠配置与数据结构不匹配，最终仅第一个数据集能正常渲染。

1. 修复moment对象的突变问题 #

Moment.js的add()方法会直接修改原对象，导致后续时间计算基于已修改的时间值，而非初始的todayStartTime。必须使用clone()创建独立的moment实例：

const data = {
  datasets: [
    {
      label: `T1 ${moment(todayStartTime).clone().add(0.5, 'hours').format('HH:mm')}`,
      data: [{ x: moment(todayStartTime).clone().add(0.5, 'hours'), y: 0 }],
      backgroundColor: "red"
    },
    {
      label: `T2 ${moment(todayStartTime).clone().add(2, 'hours').format('HH:mm')}`,
      data: [{ x: moment(todayStartTime).clone().add(2, 'hours'), y: 0 }],
      backgroundColor: "blue"
    },
    {
      label: `T3 ${moment(todayStartTime).clone().add(3, 'hours').format('HH:mm')}`,
      data: [{ x: moment(todayStartTime).clone().add(3, 'hours'), y: 0 }],
      backgroundColor: "orange"
    },  
  ]
};

2. 引入时间轴适配器 #

Chart.js v3+版本需要单独引入时间适配器才能正确解析moment时间对象，在HTML中添加以下脚本：

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>

3. 调整堆叠配置匹配数据结构 #

你当前的需求是在时间轴上显示不同时间点的柱子，而非堆叠数值，因此需要关闭堆叠配置：

var options={
  responsive:true,
  maintainAspectRatio: false, 
  indexAxis: 'y',
  scales: {
    x: {   
      offset: true,   
      stacked: false, // 关闭x轴堆叠
      type: 'time',
      time: { unit:'hour' },
      min: todayStartTime, // 直接使用moment对象，无需转字符串
      max: todayEndTime
    },
    y: {
      stacked: false, // 关闭y轴堆叠
      offset: true,
      ticks: {
        callback: () => '任务' // 自定义y轴标签，避免显示0
      }
    }
  }
}

如果确实需要堆叠效果（比如同一任务下的不同时间段叠加），则需调整数据结构，将x值改为时长（数值类型）而非时间点，示例：

// 同一y=0下，堆叠不同时长的任务
const data = {
  datasets: [
    { label: "T1", data: [{ x: 2, y: 0 }], backgroundColor: "red" }, // 2小时
    { label: "T2", data: [{ x: 3, y: 0 }], backgroundColor: "blue" }, // 3小时
    { label: "T3", data: [{ x: 1, y: 0 }], backgroundColor: "orange" } // 1小时
  ]
};

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