Highcharts的JSON数据格式

Question

I have a json object as shown below. I would like it to groupBy based on a specific property say "SEX" and pass it to highcharts such that I have only one xAxis category for "TIME" and chart should look like below:

[{"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},]

How do we achieve it for the above JSON format..??

Answer 1

First of all, you should use filter method in order to obtain two arrays: one for male and another for female entities.

Then use map method in order to obtain dates , femaleRates and maleRates arrays .

 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); 

The last step is to display data in your chart .

 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>