[英]Stacked bar charts in Chart.js with JSON data
我有以下JSON数据。
[
{
"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年度只有Apple,因此只会显示Apple。 在2016-09年,有4个产品,因此将根据4个产品及其总重量来显示4个桩栏。 我已经阅读了chart.js文档。 根据文档,我必须在数据集中提供Y轴值。 如何为数据集提取Y轴值,以根据给定的JSON数据创建堆叠的条形图? 如果我想根据上面给出的JSON数据手动创建图表,则可能是这样。
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数据中提取data
集的data
部分的方法。
此代码段应解决您问题的最困难部分(使用ES6语法):
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.