Chart.js线性轴固定步长下堆叠数据无法正常显示问题

我帮你排查了这个堆叠条形图的问题，两种异常情况的根源其实是Chart.js对类别轴和线性轴的数据处理逻辑不同：

问题原因拆解 #

• 第一种情况（未显式设置X轴类型）：Chart.js默认会把X轴识别为类别轴（category），这时候ticks.min/max/stepSize的配置会被忽略，轴刻度完全由labels数组决定，所以X轴没法按你想要的固定步长显示。
• 第二种情况（显式设置type: 'linear'）：线性轴要求数据必须是带x和y属性的键值对，但你传入的是普通数值数组，Chart.js无法将这些数据映射到线性X轴的刻度上，导致数据无法渲染。

解决方案 #

要实现固定步长的堆叠条形图，你需要同时满足两个条件：

1. 显式将X轴设置为type: 'linear'
2. 把每个数据集的data改成包含x（对应X轴刻度）和y（对应数值）的对象数组

修正后的完整代码 #

// 假设你的labels、workingHoursRegularPart、workingHoursOvertimeHours是已定义的数组
// 先把数据转换成线性轴需要的格式
const formattedRegularData = workingHoursRegularPart.map((value, index) => ({
  x: labels[index],
  y: value
}));

const formattedOvertimeData = workingHoursOvertimeHours.map((value, index) => ({
  x: labels[index],
  y: value
}));

new Chart(ctx, {
  "type": "bar",
  "data": {
    "datasets": [{
      "label": 'Regular working hours',
      "data": formattedRegularData,
      "backgroundColor": 'rgba(30,60,160,0.5)',
      "borderColor": 'rgba(30,60,160)',
      "borderWidth": 1
    }, {
      "label": 'Overtime',
      "data": formattedOvertimeData,
      "backgroundColor": 'rgba(60,30,160,0.25)',
      "borderColor": 'rgba(60,30,160)',
      "borderWidth": 1
    } ]
  },
  "options": {
    "animation": false,
    "legend": { "display": false },
    "responsive": true,
    "scales": {
      "xAxes": [{
        type: 'linear',
        position: 'bottom',
        "stacked": true,
        "ticks": { "min": 1, "max": 31, "stepSize": 7 }
      }],
      "yAxes": [{
        "stacked": true,
        "ticks": { "beginAtZero": true, "min": 0, "max": 16, "stepSize": 2 }
      }]
    }
  }
});

补充说明 #

• 线性轴不需要依赖labels数组，它会直接从数据的x值生成刻度，同时遵循你设置的min/max/stepSize规则
• 转换后的对象数组能让Chart.js准确把每个数据点映射到X轴对应的位置，同时保证堆叠效果正常生效

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