Horizontal time stacked bar graph堆叠异常：第二数据系列无法并排堆叠求助

问题说明 #

尝试制作展示时间段的横向堆叠时间条形图，当前仅能显示一个时间跨度，第二个数据系列无法与第一个并排堆叠，期望蓝色系列紧挨着橙色系列堆叠，不确定问题出在时间格式还是配置上。

错误原因 #

1. 数据长度不匹配：labels数组包含7个日期，但每个数据集的data数组仅1个元素，导致只有第一个y轴标签有数据，其余日期无对应数据。
2. 时间堆叠配置缺失：横向堆叠时间条形图需要调整条形占比参数，且时间数据需与对应日期绑定，否则Chart.js无法正确计算堆叠位置。

修正后的代码 #

HTML代码 #

<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
</body>

JS代码 #

const options = {
  type: 'bar',
  data: {
    labels: [
      "Sun 19th Feb 2023",
      "Mon 20th Feb 2023",
      "Tue 21st Feb 2023",
      "Wed 22nd Feb 2023",
      "Thu 23rd Feb 2023",
      "Fri 24th Feb 2023",
      "Sat 25th Feb 2023"
    ],
    datasets: [{
        label: '1st Data',
        // 每个日期对应一个时间段，与labels长度匹配
        data: [
          ["2023-02-19T08:25", "2023-02-19T08:39"],
          ["2023-02-20T08:20", "2023-02-20T08:40"],
          ["2023-02-21T08:15", "2023-02-21T08:35"],
          ["2023-02-22T08:30", "2023-02-22T08:45"],
          ["2023-02-23T08:22", "2023-02-23T08:38"],
          ["2023-02-24T08:28", "2023-02-24T08:42"],
          ["2023-02-25T08:18", "2023-02-25T08:32"]
        ],
        backgroundColor: 'orange',
        barPercentage: 1,
        categoryPercentage: 1
      },
      {
        label: '2nd Data',
        // 每个日期对应紧接第一个系列的时间段
        data: [
          ["2023-02-19T08:39", "2023-02-19T08:59"],
          ["2023-02-20T08:40", "2023-02-20T09:00"],
          ["2023-02-21T08:35", "2023-02-21T08:55"],
          ["2023-02-22T08:45", "2023-02-22T09:05"],
          ["2023-02-23T08:38", "2023-02-23T08:58"],
          ["2023-02-24T08:42", "2023-02-24T09:02"],
          ["2023-02-25T08:32", "2023-02-25T08:52"]
        ],
        backgroundColor: 'blue',
        barPercentage: 1,
        categoryPercentage: 1
      }
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        stacked: true,
      },
      x: {
        stacked: true,
        position: 'top',
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'HH:mm'
          }
        },
        min: "2023-02-19T07:00",
        max: "2023-02-25T19:00",
      },
    },
  },
  plugins: {
    legend: {
      display: false
    },
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

关键调整点 #

• 每个数据集的data数组长度与labels一致，每个元素绑定对应日期的完整时间戳，确保Chart.js能正确关联y轴标签与时间段。
• 添加barPercentage: 1和categoryPercentage: 1，消除条形之间的间隙，实现紧密堆叠。
• x轴的min和max设置为包含所有日期的时间范围，确保所有时间段都能正确显示。

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