vue-chart集成Chart.js时x轴堆叠柱状图无法并列显示问题

开发Chart.js堆叠柱状图时，目标效果为同一x轴标签下，2021年相关数据组成的堆叠柱组，与2022年的单独柱体并列排布。当前实现存在显示异常：2022年柱体被遮挡在2021年堆叠柱下方，仅当隐藏2021年对应数值时2022年柱体才会显现。
此前尝试过新增x轴、将x轴stacked属性设为false的方案，但该操作会取消所有柱体的堆叠效果，三个柱体全部并列排布，不符合预期。

JavaScript 逻辑 #

var barChartData = {
  labels: ["January", "February"],
  datasets: [{
    data: [10, 20],
    label: '2021',
    backgroundColor: "#ffe100",
    yAxisId: 'y-stacked',
  }, {
    data: [15, 30],
    label: '2021 Total',
    backgroundColor: "#ee0000",
    yAxisId: 'y-stacked',
  }, {
    data: [6, 19],
    label: '2022 YTD',
    backgroundColor: "#555555",
  }]
};

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: {
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked"
    },
    tooltips: {
      mode: 'label'
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: false,
        ticks: {
          beginAtZero: true,
        }
      }, {
        id: "y-stacked",
        stacked: true,
        display: false,
        ticks: {
          beginAtZero: true,
          min: 0,
        },
        type: 'linear'
      }]
    }
  }
});

HTML 页面结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

<div style="width: 100%">
  <canvas id="canvas"></canvas>
</div>

异常原因来自Chart.js 2.x的堆叠规则：x轴开启stacked: true后，未指定分组的数据集会默认归为同一x轴堆叠组，所有同组柱体在同一x坐标位置叠加排布，因此2022年的柱体和2021年堆叠柱位置重合，被上层柱体遮挡。
不需要新增x轴，只需要利用数据集的stack属性给柱体分组即可：

• 同属2021年堆叠组的两个数据集，设置相同的stack值（比如stack: '2021'），保持原有绑定堆叠y轴的配置
• 2022年的单独柱体设置不同的stack值（比如stack: '2022'），绑定非堆叠的默认y轴
• x轴保持stacked: true配置，原有y轴配置无需修改

修正后的核心数据集配置如下：

datasets: [{
  data: [10, 20],
  label: '2021',
  backgroundColor: "#ffe100",
  yAxisId: 'y-stacked',
  stack: '2021' // 归为2021堆叠组
}, {
  data: [15, 30],
  label: '2021 Total',
  backgroundColor: "#ee0000",
  yAxisId: 'y-stacked',
  stack: '2021' // 归为2021堆叠组
}, {
  data: [6, 19],
  label: '2022 YTD',
  backgroundColor: "#555555",
  stack: '2022' // 归为2022独立组
}]

配置完成后，同组的2021年数据会在同一x位置堆叠，不同组的2022年柱体则会并列排布在2021堆叠柱旁，不会被遮挡。

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