JSON Highcharts的数据格式

我有一个json对象，如下所示。我会把它想基于特定属性GROUPBY说“SEX”，并把它传递给highcharts这样，我只有一个X轴类别为“TIME”和图应该如下：JSON Highcharts的数据格式

[{"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格式.. ??

来源

2017-10-07 MoChen

首先，你应该使用以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>

来源

2017-10-07 12:56:18

感谢您的回答。我还有一个问题，实际上，我的JSON数据有很多地区[亚利桑那州，爱达荷州，纽约州，澳大利亚....]，我想创建单独的数据系列，并将其输入到高级图表中。有没有其他方法可以减少为所有人编写地图方法（其中200人）。 – MoChen

JSON Highcharts的数据格式

回答

相关问题