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

oyxsuwqo 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(154)

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

chart.js

来源：https://stackoverflow.com/questions/76860310/chart-js-how-to-align-grouped-bar-chart-correctly

1条答案

按热度按时间

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

赞(0）回复(0）举报 2023-10-18

我来回答

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

1条答案

相关问题

热门标签

最新问答