英文:
Stacked barchart in C3.js don't show group
问题
以下是翻译好的内容：
我试图在C3.js中制作一个堆叠柱状图，使用一个包含产品、月份和销售额字段的JSON，例如：
[{ "product": "Pulp", "month": "january", "sale_amount": 320 },
{ "product": "Pulp", "month": "february", "sale_amount": 160 },
{ "product": "Beef", "month": "january", "sale_amount": 210 },
{ "product": "Beef", "month": "february", "sale_amount": 90 }]
然后，我尝试使用以下代码生成一个显示每个产品在每个月份中销售额的堆叠柱状图：
var chart = c3.generate({
data: {
json: data,
keys: {
x: "product",
value: ["sale_amount"]
},
type: "bar",
groups: [["month"]]
},
axis: {
x: {
type: "category"
}
}
});
但图表在X轴上显示了产品，但没有将月份分组，您可以在这里查看：https://codepen.io/NetWilson05/pen/bGmdMZR
我做错了什么？
英文:
I am trying to make a stacked barchart in C3.js with a JSON with the fields product, month, amount_sale, for example:
[{"product": "Pulp", "month": "january", "sale_amount": 320},
{"product": "Pulp", "month": "february", "sale_amount": 160},
{"product": "Beef", "month": "january", "sale_amount": 210},
{"product": "Beef", "month": "february", "sale_amount": 90}]
Then i try to generate a stacked bar graph that shows for each product the sale amount in each month, with the following code:
var chart = c3.generate({
data: {
json: data,
keys: {
x: "product",
value: ["sale_amount"]
},
type: "bar",
groups: [["month"]]
},
axis: {
x: {
type: "category"
}
}
});
But the graph shows me the product on the X axis but it does not take the month group, this can we see in:
https://codepen.io/NetWilson05/pen/bGmdMZR
what am i doing wrong?
答案1
得分: 1
JSON格式错误，必须采用以下格式：X，Col1，Col2，...
完整示例如下：
const data = [
{ "product": "Pulp", "month": "january", "sale_amount": 320 },
{ "product": "Pulp", "month": "february", "sale_amount": 160 },
{ "product": "Beef", "month": "january", "sale_amount": 210 },
{ "product": "Beef", "month": "february", "sale_amount": 90 }
];
const transformedData = data.reduce((acc, cur) => {
const existingMonth = acc.find((item) => item.month === cur.month);
if (existingMonth) {
existingMonth[cur.product] = cur.sale_amount;
} else {
acc.push({ month: cur.month, [cur.product]: cur.sale_amount });
}
return acc;
}, []);
const chart = c3.generate({
data: {
json: transformedData,
keys: {
x: "month",
value: ["Pulp", "Beef"]
},
type: "bar",
groups: [["Pulp", "Beef"]]
},
axis: {
x: {
type: "category"
}
}
});
基于另一个用户稍后删除的回答，我不知道原因。
英文:
the JSON format is wrong, has to be in the format: X, Col1, Col2,...
the full example is:
const data = [
{ "product": "Pulp", "month": "january", "sale_amount": 320 },
{ "product": "Pulp", "month": "february", "sale_amount": 160 },
{ "product": "Beef", "month": "january", "sale_amount": 210 },
{ "product": "Beef", "month": "february", "sale_amount": 90 }
];
const transformedData = data.reduce((acc, cur) => {
const existingMonth = acc.find((item) => item.month === cur.month);
if (existingMonth) {
existingMonth[cur.product] = cur.sale_amount;
} else {
acc.push({ month: cur.month, [cur.product]: cur.sale_amount });
}
return acc;
}, []);
const chart = c3.generate({
data: {
json: transformedData,
keys: {
x: "month",
value: ["Pulp", "Beef"]
},
type: "bar",
groups: [["Pulp", "Beef"]]
},
axis: {
x: {
type: "category"
}
}
});
this is based on other response that a user delete later i dont know why
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论