Chart.js中带有JSON数据的堆积条形图 [英] Stacked bar charts in Chart.js with JSON data
问题描述
我有以下JSON数据。
I have following JSON data.
[
{
"date": "2016-05-01T00:00:00",
"productInformation": [
{
"productName": "Apple",
"totalWeight": 200
}
]
},
{
"date": "2016-09-01T00:00:00",
"productInformation": [
{
"productName": "Apple",
"totalWeight": 632
},
{
"productName": "Mango",
"totalWeight": 856
},
{
"productName": "Spinach",
"totalWeight": 545
},
{
"productName": "Grapes",
"totalWeight": 338
}
]
},
{
"date": "2017-01-01T00:00:00",
"productInformation": [
{
"productName": "Mango",
"totalWeight": 500
}
]
}
]
在X轴上我想要显示月份和年份,在Y轴上我想显示产品信息的堆叠条。例如在2016-05,只有苹果,所以它只会显示苹果。 2016-09有4种产品,因此根据4种产品及其总重量将显示4个放样条。我已经阅读了chart.js文档。根据文档,我必须在数据集中提供Y轴值。如何从数据集中提取Y轴值以根据给定的JSON数据创建堆积条?如果我想从上面给出的JSON数据手动创建图表那么它就是这样的。
On X axis I want to display Month and year and on Y axis I want to display stacked bar of product information. for example in 2016-05 there is only Apple so it will only display apple. In 2016-09 there are 4 products so it will display 4 staked bar according to 4 products and its total weight. I have read chart.js documentation. According to documentation I have to provide Y axis values in dataset. How do I extract Y axis values for dataset to create stacked bar from given JSON data? If I want to create chart manually from JSON data given above then it would be something like this.
var barChartData = {
labels: ["May 2016", "September 2016", "January 2017"],
datasets: [{
label: "Apple",
data: [200, 632, 0],
backgroundColor: "#3c8dbc"
},
{
label: "Mango",
data: [0,856,500],
backgroundColor: "#3c8dbc"
},
{
label: "Spinach",
data: [0,545,0],
backgroundColor: "#3c8dbc"
},
{
label: "Grapes",
data: [0,338,0],
backgroundColor: "#3c8dbc"
}]
};
我需要一种方法来提取数据
部分来自给定JSON数据的数据集。
I need a way to extract data
part of dataset from given JSON data.
推荐答案
此代码段应解决问题中最难的部分(使用ES6语法):
This snippet should solve the hardest part of your problem (using ES6 syntax):
const data = [{
"date": "2016-05-01T00:00:00",
"productInformation": [{
"productName": "Apple",
"totalWeight": 200
}]
}, {
"date": "2016-09-01T00:00:00",
"productInformation": [{
"productName": "Apple",
"totalWeight": 632
}, {
"productName": "Mango",
"totalWeight": 856
}, {
"productName": "Spinach",
"totalWeight": 545
}, {
"productName": "Grapes",
"totalWeight": 338
}]
}, {
"date": "2017-01-01T00:00:00",
"productInformation": [{
"productName": "Mango",
"totalWeight": 500
}]
}]
const uniq = a => [...new Set(a)]
const flatten = a => [].concat.apply([], a)
// step 1: find the distinct dates: ["2016-05-01T00:00:00", ... ]
const dates = data.map(e => e.date)
// step 2: find the distinct labels: [Apple, Mango, ... ]
const labels = uniq(
flatten(data.map(e => e.productInformation))
.map(e => e.productName))
// step 3: map the labels to entries containing their data by searching the original data array
const result = labels.map(label => {
return {
label,
data: dates.map(date => {
const hit = data.find(e => e.date === date)
.productInformation
.find(p => p.productName === label)
return hit ? hit.totalWeight : 0
})
}
})
console.log(result)
这篇关于Chart.js中带有JSON数据的堆积条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!