这是我的Sample Json,我试图将这些数据显示为高图表,
我的计划是在Y轴和x轴os版本上选择电池平均值。
所以我可以将每个模型与所有操作系统版本进行比较。
例如,如图所示
值为电池平均值 城市名称将为Os版本, 图中的每个投影条都是相同的模型,但具有不同的操作系统版本。
我无法弄清楚如何解析Json数据以在图表中显示
[
{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "100",
"sampleyqty": "42"
},
{
"model": "LG-H961S",
"osversion": "6.0",
"batteryavg": "98",
"sampleyqty": "73"
},
{
"model": "GOOGLE NEXUS 5X",
"osversion": "5.1.0",
"batteryavg": "50",
"sampleyqty": "53"
},
{
"model": "NEXUS 6P",
"osversion": "6.2.0",
"batteryavg": "100",
"sampleyqty": "55"
},
{
"model": "GOOGLE NEXUS 5",
"osversion": "6.0",
"batteryavg": "20",
"sampleyqty": "9"
},
{
"model": "GOOGLE NEXUS 4",
"osversion": "5.1",
"batteryavg": "98",
"sampleyqty": "4"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "12",
"sampleyqty": "22"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "46",
"sampleyqty": "64"
},
{
"model": "F5121",
"osversion": "6.0.1",
"batteryavg": "94",
"sampleyqty": "15"
},
{
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "34",
"sampleyqty": "55"
},
{
"model": "SM-A500F",
"osversion": "5.0.2",
"batteryavg": "44",
"sampleyqty": "33"
},
{
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "74",
"sampleyqty": "81"
},
{
"model": "GOOGLE NEXUS 4",
"osversion": "5.1",
"batteryavg": "75",
"sampleyqty": "62"
},
{
"model": "REDMI NOTE 3",
"osversion": "5.0.2",
"batteryavg": "13",
"sampleyqty": "12"
},
{
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "87",
"sampleyqty": "72"
},
{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "52",
"sampleyqty": "21"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "85",
"sampleyqty": "34"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "56",
"sampleyqty": "51"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "56",
"sampleyqty": "11"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "86",
"sampleyqty": "22"
},
{
"model": "NEXUS 6",
"osversion": "7.0",
"batteryavg": "88",
"sampleyqty": "11"
},
{
"model": "SAMSUNG GALAXY S6",
"osversion": "5.0",
"batteryavg": "23",
"sampleyqty": "84"
},
{
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "87",
"sampleyqty": "12"
},
{
"model": "SAMSUNG GALAXY S6",
"osversion": "5.0",
"batteryavg": "65",
"sampleyqty": "42"
},
{
"model": "GOOGLE NEXUS 4",
"osversion": "5.1",
"batteryavg": "56",
"sampleyqty": "32"
},
{
"model": "LG-H961S",
"osversion": "6.0",
"batteryavg": "64",
"sampleyqty": "54"
},
{
"model": "NEXUS 6P",
"osversion": "6.0",
"batteryavg": "53",
"sampleyqty": "17"
},
{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "75",
"sampleyqty": "32"
},
{
"model": "F5321",
"osversion": "6.0.1",
"batteryavg": "64",
"sampleyqty": "52"
},
{
"model": "F5321",
"osversion": "6.0.1",
"batteryavg": "64",
"sampleyqty": "22"
},
{
"model": "ALE-L21",
"osversion": "5.0.1",
"batteryavg": "76",
"sampleyqty": "52"
},
{
"model": "HUAWEI MT7-TL10",
"osversion": "6.0",
"batteryavg": "53",
"sampleyqty": "4"
},
{
"model": "F5321",
"osversion": "6.0.1",
"batteryavg": "43",
"sampleyqty": "51"
},
{
"model": "HUAWEI MT7-TL10",
"osversion": "6.0",
"batteryavg": "22",
"sampleyqty": "20"
},
{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "32",
"sampleyqty": "31"
},
{
"model": "NEXUS 6P",
"osversion": "6.0",
"batteryavg": "74",
"sampleyqty": "13"
},
{
"model": "F5321",
"osversion": "6.0.1",
"batteryavg": "86",
"sampleyqty": "52"
},
{
"model": "NEXUS 5",
"osversion": "6.0",
"batteryavg": "54",
"sampleyqty": "22"
},
{
"model": "NEXUS 6P",
"osversion": "6.0",
"batteryavg": "77",
"sampleyqty": "32"
},
{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "99",
"sampleyqty": "12"
}
]
我期待userSeriesData数据为
[{
"data": [
["GOOGLE NEXUS 5X", 100],
["NEXUS 6P", 77],
["HUAWEI MT7-TL10", 53],
["LG-H961S", 64],
["GOOGLE NEXUS 5", 20],
....,
....,
so on
],
"osversion": "6.0"
},{
"data": [
["GOOGLE NEXUS 5X", 50],
["GOOGLE NEXUS4", 98],
["GOOGLE NEXUS 5", 34],
....,
....,
so on
],
"osversion": "5.1.0"
}]
这就是我的开始:
const userSeriesData = userData.reduce((topAccum, parent, index) => {
if (parent && Object.keys(parent).length > 0) {
const childReduce = Object.keys(parent).reduce((childAccum, child, i) => {
childAccum.osversion = parent['osversion']
childAccum.data.push(parent['modelcode'], parent['sampleqty'])
return childAccum
}, {
osversion: '',
data: []
})
topAccum.series.push(childReduce)
}
return topAccum;
}, {
series: []
})
JFYI:示例JSON是虚拟数据,但它看起来或多或少相同,随机OS版本,型号,电池平均值
非常感谢你的帮助。
答案 0 :(得分:2)
以下是使用部分数据的完整解决方案:
const json = [{
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "100",
"sampleyqty": "42"
}, {
"model": "LG-H961S",
"osversion": "6.0",
"batteryavg": "98",
"sampleyqty": "73"
}, {
"model": "GOOGLE NEXUS 5X",
"osversion": "5.1.0",
"batteryavg": "50",
"sampleyqty": "53"
}, {
"model": "NEXUS 6P",
"osversion": "6.2.0",
"batteryavg": "100",
"sampleyqty": "55"
}, {
"model": "GOOGLE NEXUS 5",
"osversion": "6.0",
"batteryavg": "20",
"sampleyqty": "9"
}, {
"model": "GOOGLE NEXUS 4",
"osversion": "5.1",
"batteryavg": "98",
"sampleyqty": "4"
}, {
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "12",
"sampleyqty": "22"
}, {
"model": "NEXUS 6P",
"osversion": "7.1.1",
"batteryavg": "46",
"sampleyqty": "64"
}, {
"model": "F5121",
"osversion": "6.0.1",
"batteryavg": "94",
"sampleyqty": "15"
}, {
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "34",
"sampleyqty": "55"
}, {
"model": "SM-A500F",
"osversion": "5.0.2",
"batteryavg": "44",
"sampleyqty": "33"
}, {
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "74",
"sampleyqty": "81"
}, {
"model": "GOOGLE NEXUS 4",
"osversion": "5.1",
"batteryavg": "75",
"sampleyqty": "62"
}, {
"model": "REDMI NOTE 3",
"osversion": "5.0.2",
"batteryavg": "13",
"sampleyqty": "12"
}, {
"model": "GOOGLE NEXUS 5",
"osversion": "5.1",
"batteryavg": "87",
"sampleyqty": "72"
}, {
"model": "GOOGLE NEXUS 5X",
"osversion": "7.0",
"batteryavg": "52",
"sampleyqty": "21"
}]
// Create categories object in order to remove duplicates
const cats = {}
json.forEach((o) => cats[o.model] = 1)
const categories = Object.keys(cats)
// Parse your data
let series = json.reduce((acc, o) => {
// Check if array already defined
if (acc[o.osversion] && acc[o.osversion].data) {
// Push to array new values
acc[o.osversion].data.push({x: categories.indexOf(o.model), y: Number(o.batteryavg)})
} else {
// Create new array with first value
acc[o.osversion] = { data: [{x: categories.indexOf(o.model), y: Number(o.batteryavg)}] }
}
return acc
}, {})
// Convert object to array
series = Object.keys(series).map((key) => {
series[key].name = key
return series[key]
})
series = series.map(serie => {
serie.data.sort((a, b) => a.x - b.x)
return serie
})
console.log(series, categories)
// Chart options
const options = {
xAxis: { categories: categories },
chart: { type: 'column' },
series: series
}
// Create chart
const chart = Highcharts.chart('container', options)