我有一个json对象,如下所示。我希望它能够基于特定的财产分组,并且说#SE; SEX"并将其传递给highcharts,以便我只有一个xAxis类别用于" TIME"和图表应如下所示:immutable static factories
[{"TIME":"2017-09-15","SEX":"MALE","ARIZONA":483280000.0,"IDAHO":6624960.0,"RATE":98.6291686272},
{"TIME":"2017-09-15","SEX":"FEMALE","ARIZONA":1034350000.0,"IDAHO":32409500.0,"RATE":96.8666697274},
{"TIME":"2017-09-16","SEX":"MALE","ARIZONA":482379000.0,"IDAHO":9578100.0,"RATE":98.0144001036},
{"TIME":"2017-09-16","SEX":"FEMALE","ARIZONA":1052960000.0,"IDAHO":40686800.0,"RATE":96.1359744871},
{"TIME":"2017-09-17","SEX":"FEMALE","ARIZONA":1052530000.0,"IDAHO":41476900.0,"RATE":96.0593301937},
{"TIME":"2017-09-17","SEX":"MALE","ARIZONA":1052590000.0,"IDAHO":41479900.0,"RATE":96.0893301937},]
我们如何为上述JSON格式实现它???
答案 0 :(得分:2)
首先,您应该使用filter
方法来获取两个数组:一个用于male
,另一个用于female
个实体。
然后使用map
方法获取dates
,femaleRates
和maleRates
数组。
let array=[{"TIME":"2017-09-15","SEX":"MALE","ARIZONA":483280000.0,"IDAHO":6624960.0,"RATE":98.6291686272}, {"TIME":"2017-09-15","SEX":"FEMALE","ARIZONA":1034350000.0,"IDAHO":32409500.0,"RATE":96.8666697274}, {"TIME":"2017-09-16","SEX":"MALE","ARIZONA":482379000.0,"IDAHO":9578100.0,"RATE":98.0144001036}, {"TIME":"2017-09-16","SEX":"FEMALE","ARIZONA":1052960000.0,"IDAHO":40686800.0,"RATE":96.1359744871}, {"TIME":"2017-09-17","SEX":"FEMALE","ARIZONA":1052530000.0,"IDAHO":41476900.0,"RATE":96.0593301937}, {"TIME":"2017-09-17","SEX":"MALE","ARIZONA":1052590000.0,"IDAHO":41479900.0,"RATE":96.0893301937}];
let males=array.filter(a=>a.SEX=='MALE');
let females=array.filter(a=>a.SEX=='FEMALE');
let dates=males.map(a=>a.TIME);
let malesRates=males.map(a=>a.RATE);
let femaleRates=females.map(a=>a.RATE);
console.log(dates);
console.log(malesRates);
console.log(femaleRates);

最后一步是在图表中显示数据。
let array=[{"TIME":"2017-09-15","SEX":"MALE","ARIZONA":483280000.0,"IDAHO":6624960.0,"RATE":98.6291686272}, {"TIME":"2017-09-15","SEX":"FEMALE","ARIZONA":1034350000.0,"IDAHO":32409500.0,"RATE":96.8666697274}, {"TIME":"2017-09-16","SEX":"MALE","ARIZONA":482379000.0,"IDAHO":9578100.0,"RATE":98.0144001036}, {"TIME":"2017-09-16","SEX":"FEMALE","ARIZONA":1052960000.0,"IDAHO":40686800.0,"RATE":96.1359744871}, {"TIME":"2017-09-17","SEX":"FEMALE","ARIZONA":1052530000.0,"IDAHO":41476900.0,"RATE":96.0593301937}, {"TIME":"2017-09-17","SEX":"MALE","ARIZONA":1052590000.0,"IDAHO":41479900.0,"RATE":96.0893301937}];
let males=array.filter(a=>a.SEX=='MALE');
let females=array.filter(a=>a.SEX=='FEMALE');
let dates=males.map(a=>a.TIME);
let malesRates=males.map(a=>a.RATE);
let femaleRates=females.map(a=>a.RATE);
Highcharts.chart('container', {
xAxis: {
categories:dates
},
series: [{
name: 'Males',
data: malesRates
}, {
name: 'Females',
data:femaleRates
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
&#13;