英文:
Chart.js how to align grouped bar chart correctly?
问题
我有一个使用Chart.js的分组条形图用例,
在X轴上有月份,
在Y轴上,我有按两位数国家代码划分的堆叠条形图,
由于某种原因,条形图根据其堆叠没有正确对齐,
使用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
我需要改变什么?
英文:
I have a grouped bar chart use case using Chart.js,<br>
On the X axis I have Months,<br>
On the Y axis, I have stacked bars divided by 2 digit Country codes,<br>
For some reason the bars are not getting aligned properly based on their stack,<br>
The output looks like this using react-chartjs-2 -<br>
The dataset is like this -<br>
{
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]
}
]
};
Following is my code not in reactjs but something similar-<br>
https://codesandbox.io/s/sweet-bartik-4xnkrd?file=/App.tsx
What do I need to change?
答案1
得分: 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]
}]
对于每个"country code"(MY、ID、PH),应该有一个对象。月份的值分别在数据数组中指定。
"stack"属性指定了特定月份中的堆栈名称。如果指定了更多的"stack",每个月份将有更多的列。
英文:
I believe your dataset is wrongly structured.
For stacked bar chart, the structure should be like this:
"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]
}]
For each "country code" (MY, ID, PH), there should be one object. The values for the months are specified in the data array respectively.
The stack
attribute specifies name of the stack in the particular month. If you specify more stack
s, there will be more columns for each of the months.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论