对JSON对象进行操作，使其适合高图表

Manipulate JSON object to fit it to highcharts

本文关键字：高图表操作 JSON 对象更新时间：2024-01-11

我有一个来自MongoDB的JSON响应，格式如下：

[{
    "_id" : 4,
    "status" : [ 
        {
            "status" : "Closed",
            "count" : 2
        }, 
        {
            "status" : "Open",
            "count" : 17
        }
    ],
    "count" : 19
},
{
    "_id" : 3,
    "status" : [ 
        {
            "status" : "Closed",
            "count" : 6
        }, 
        {
            "status" : "Open",
            "count" : 22
        }
    ],
    "count" : 28
}]

我想把它处理成一个对象数组，这样我就可以很容易地把它们传递到高图表上。

categories: ['3', '4']
series: [{
            name: 'Open',
            data: [22,17]
        }, {
            name: 'Closed',
            data: [6,2]
        }]

基本上，我想将所有"开放"answers"封闭"的类别分组。

如果你的数据总是这样格式化，我会这样做：

var data = [{
    "_id" : 4,
    "status" : [ 
        {
            "status" : "Closed",
            "count" : 2
        }, 
        {
            "status" : "Open",
            "count" : 17
        }
    ],
    "count" : 19
},
{
    "_id" : 3,
    "status" : [ 
        {
            "status" : "Closed",
            "count" : 6
        }, 
        {
            "status" : "Open",
            "count" : 22
        }
    ],
    "count" : 28
}]
$(function () {
        var myCategories = [];
        var mySeries = [{
                        name: 'Open',
                        data: []
                        },{
                        name: 'Closed',
                        data: []
                     }];
    
    for (var i = 0; i < data.length; i++){
         myCategories.push(data[i]._id);
         mySeries[0].data.push(data[i].status[0].count);
         mySeries[1].data.push(data[i].status[1].count);
    }
  $('#series').text(JSON.stringify(mySeries));
    $('#categories').text(JSON.stringify(myCategories));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Categories:</label>
<div id="categories"></div>
<label>Series:</label>
<div id="series"></div>

然后在高图中，只需设置

categories: myCategories,
series: mySeries