Chart.js如何正确对齐分组柱状图?

huangapple go评论85阅读模式
英文:

Chart.js how to align grouped bar chart correctly?

问题

我有一个使用Chart.js的分组条形图用例,
在X轴上有月份,
在Y轴上,我有按两位数国家代码划分的堆叠条形图,

由于某种原因,条形图根据其堆叠没有正确对齐,
使用react-chartjs-2输出如下所示:

Chart.js如何正确对齐分组柱状图?

数据集如下所示:

{
  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>

Chart.js如何正确对齐分组柱状图?

The dataset is like this -<br>

{
  labels: [&quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
  datasets: [
    {
      label: &quot;MY&quot;,
      stack: &quot;May&quot;,
      backgroundColor: &quot;#f9aabd&quot;,
      data: [2]
    },
    {
      label: &quot;ID&quot;,
      stack: &quot;May&quot;,
      backgroundColor: &quot;#ff980070&quot;,
      data: [41]
    },
    {
      label: &quot;MY&quot;,
      stack: &quot;June&quot;,
      backgroundColor: &quot;#f9aabd&quot;,
      data: [2]
    },
    {
      label: &quot;ID&quot;,
      stack: &quot;June&quot;,
      backgroundColor: &quot;#ff980070&quot;,
      data: [64]
    },
    {
      label: &quot;PH&quot;,
      stack: &quot;June&quot;,
      backgroundColor: &quot;#cce1f3&quot;,
      data: [26]
    },
    {
      label: &quot;ID&quot;,
      stack: &quot;July&quot;,
      backgroundColor: &quot;#ff980070&quot;,
      data: [25]
    },
    {
      label: &quot;MY&quot;,
      stack: &quot;July&quot;,
      backgroundColor: &quot;#f9aabd&quot;,
      data: [22]
    },
    {
      label: &quot;PH&quot;,
      stack: &quot;July&quot;,
      backgroundColor: &quot;#cce1f3&quot;,
      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:

&quot;datasets&quot;: [{
	&quot;label&quot;: &quot;MY&quot;,
	&quot;stack&quot;: &quot;stack1&quot;,
	&quot;backgroundColor&quot;: &quot;#f9aabd&quot;,
	&quot;data&quot;: [2, 2, 22]
}, {
	&quot;label&quot;: &quot;ID&quot;,
	&quot;stack&quot;: &quot;stack1&quot;,
	&quot;backgroundColor&quot;: &quot;#ff980070&quot;,
	&quot;data&quot;: [41, 64, 25]
}, {
	&quot;label&quot;: &quot;PH&quot;,
	&quot;stack&quot;: &quot;stack1&quot;,
	&quot;backgroundColor&quot;: &quot;#cce1f3&quot;,
	&quot;data&quot;: [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 stacks, there will be more columns for each of the months.

huangapple
  • 本文由 发表于 2023年8月8日 22:02:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76860310.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定