我有一个使用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
我需要改变什么?
1条答案
按热度按时间ua4mk5z41#
我认为你的数据集结构错误。
对于堆叠条形图,结构应该是这样的:
对于每个“国家代码”(MY、ID、PH),应该有一个对象。月份的值分别在数据数组中指定。
stack
属性指定特定月份的堆栈名称。如果您指定更多的stack
s,则每个月将有更多的列。