关于 javascript：Chart.js 中带有 JSON 数据的堆叠条形图

Stacked bar charts in Chart.js with JSON data

我有以下 JSON 数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

[
{
"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 数据手动创建图表，那么它将是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 部分。

这个片段应该解决你问题中最难的部分(使用 ES6 语法)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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)