Chart.js v3多数据集共用单Y轴 非首个数据集位置上移异常

问题原因 #

你的Y轴配置了stacked: true，折线图开启堆叠后，多个数据集的数值会按同一x轴索引位置累加计算显示位置：第一个allOnline数据集直接用原值渲染，后面的allOffline、allIdle、allDnd的显示值都会叠加前面所有数据集对应位置的原始值，所以会出现整体向上偏移的情况。而且你在Y轴配置里重复写了两次stacked: true，两处都会生效。

解决方法 #

把Y轴配置中的两个stacked: true都删除，或者修改为stacked: false即可，修改后所有数据集都会按自己的原始数值对应Y轴刻度渲染。

额外注意事项 #

你当前使用的是Chart.js v3版本，配置里的gridLines是v2的旧写法，v3中网格线的配置已经迁移到grid字段下，所以你现在写的网格线颜色配置不会生效，需要调整为如下写法：

y: {
  suggestedMax: Math.max(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
  suggestedMin: Math.min(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
  stacked: false,
  ticks: {
    beginAtZero: false,
    precision: 0,
  },
  grid: {
    zeroLineColor: "rgba(255, 255, 255, 0.8)",
    color: "rgba(255, 255, 255, 0.4)"
  },
  position: 'left'
}

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