Chart.js如何正确对齐分组堆叠柱状图？

问题描述 #

使用react-chartjs-2实现分组堆叠柱状图，X轴为月份，Y轴为按两位国家代码划分的堆叠柱，但堆叠柱子未正确对齐，效果如下：

原始数据集：

{
  labels: ["May", "June", "July"],
  datasets: [
    {
      label: "MY",
      stack: "May",
      backgroundColor: "#f9aabd",
      data: [2]
    },
    {
      label: "ID",
      stack: "May",
      backgroundColor: "#ff980070",
      data: [41]
    },
    {
      label: "MY",
      stack: "June",
      backgroundColor: "#f9aabd",
      data: [2]
    },
    {
      label: "ID",
      stack: "June",
      backgroundColor: "#ff980070",
      data: [64]
    },
    {
      label: "PH",
      stack: "June",
      backgroundColor: "#cce1f3",
      data: [26]
    },
    {
      label: "ID",
      stack: "July",
      backgroundColor: "#ff980070",
      data: [25]
    },
    {
      label: "MY",
      stack: "July",
      backgroundColor: "#f9aabd",
      data: [22]
    },
    {
      label: "PH",
      stack: "July",
      backgroundColor: "#cce1f3",
      data: [3]
    }
  ]
};

需修改以下内容解决对齐问题：

修改方案 #

1. 重构数据集结构 #

按国家维度合并数据集，每个国家对应一个独立数据集，data数组长度与labels（3个月份）保持一致，无数据的月份填0：

{
  labels: ["May", "June", "July"],
  datasets: [
    {
      label: "MY",
      stack: "countryStack",
      backgroundColor: "#f9aabd",
      data: [2, 2, 22]
    },
    {
      label: "ID",
      stack: "countryStack",
      backgroundColor: "#ff980070",
      data: [41, 64, 25]
    },
    {
      label: "PH",
      stack: "countryStack",
      backgroundColor: "#cce1f3",
      data: [0, 26, 3]
    }
  ]
}

2. 统一堆叠组标识 #

将所有数据集的stack属性设置为相同值（如countryStack），确保同一月份下的不同国家柱子属于同一堆叠组。

原理说明 #

原始数据集将每个月份的每个国家拆分为独立数据集，且data仅包含单个月份的值，Chart.js会将这些数据集视为独立的X轴系列，导致柱子错位。重构后每个国家的数据集覆盖所有月份数据，Chart.js会自动将同一月份下的不同国家柱子堆叠对齐。

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