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

oyxsuwqo  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(152)

我有一个使用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
我需要改变什么?

ua4mk5z4

ua4mk5z41#

我认为你的数据集结构错误。
对于堆叠条形图,结构应该是这样的:

"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 s,则每个月将有更多的列。

相关问题