Chart.js 如何正确对齐分组条形图？

Question

我有一个使用 Chart.js 的分组条形图用例，
在 X 轴上我有几个月，
在 Y 轴上，我堆叠了除以 2 位国家/地区代码的条形，

由于某种原因，条形图没有根据其堆栈正确对齐，
使用react-chartjs-2 的输出看起来像这样 -

数据集是这样的 -

{
  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]
    }
  ]
};

以下是我的代码，不是在reactjs中，而是类似的代码-
https://codesandbox.io/s/sweet-bartik-4xnkrd?file=/App.tsx

我需要改变什么？

Answer 1

我相信您的数据集结构错误。

对于堆积条形图，结构应该是这样的：

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

对于每一种“数据类型”（MY、ID、PH），应该有一个对象。月份的值分别在数据数组中指定。

stack

属性指定特定月份的堆栈名称。如果您指定更多

stack

，每个月份将会有更多列。