如何将我的json结构转换为C3.js所需的列结构

How to convert my json structure to the column structure required by C3.js

本文关键字:结构 js C3 转换 我的 json      更新时间:2023-09-26

下面列出了我的API的输出数据结构。然而,我需要转换这个结构,以便在C3.js.中使用

{
   "data":{  
  "test7":[  
     {  
        "Date":"2016-04-26 00:00:00",
        "aId":7,
        "Amount":436464,
        "Piece":37
     },
     {  
        "Date":"2016-04-26 01:00:00",
        "aId":7,
        "Amount":546546,
        "Piece":37
     },
     {  
        "Date":"2016-04-26 02:00:00",
        "aId":7,
        "Amount":5461,
        "Piece":37
     }
  ],
  "test4":[  
     {  
        "Date":"2016-04-26 00:00:00",
        "aId":4,
        "Amount":4564,
        "Piece":60
     },
     {  
        "Date":"2016-04-26 01:00:00",
        "aId":4,
        "Amount":4756,
        "Piece":60
     },
     {  
        "Date":"2016-04-26 02:00:00",
        "aId":4,
        "Amount":2355,
        "Piece":60
     }
  ],
  "test5":[  
     {  
        "Date":"2016-04-26 00:00:00",
        "aId":5,
        "Amount":879,
        "Piece":112
     },
     {  
        "Date":"2016-04-26 01:00:00",
        "aId":5,
        "Amount":1244,
        "Piece":112
     },
     {  
        "Date":"2016-04-26 02:00:00",
        "aId":5,
        "Amount":982,
        "Piece":112
     }
  ]
}

我的C3.js有以下语法。如何将上面的数据转换为需要im C3.js的列结构?

  var chart = c3.generate({
    bindto: '#area-hour',
    data: {
        x: 'Date',
        xFormat: '%Y-%m-%dT%H:%M:%S',
        columns: [
            ['Date', '2016-04-26T00:00:00', '2016-04-26T01:00:00', '2016-04-26T02:00:00'],
            ['test7', 13371, 103871, 103371],
            ['test4', 21654, 2544, 1694],
            ['test5', 6185, 3185, 3785]
        ],
    },
    grid: {
        y: {
            show: true,
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                culling: false,
                format : "%Y-%m-%d " + "'n'r" + "%H:%M:%S"
            }
        }
    }
  });

这里有一个输入数据的转换函数。您不需要在每个数据集中输入每个日期。您也不需要输入每个日期的每个属性。

// provide the "data" attribute value (input.value) of your object to the function
console.log(convert(input.data));
function convert(input) {
    var data = {};
    var listOfAllColumnNames = {};
    // go through all the data and store it in this structure:
    // data = { "dateValue": { "key1": 1, "key2": 2 } }
    // it also saves a list of all column names for further processing
    for(var key in input) {
        if(input.hasOwnProperty(key)) {
            var dataset = input[key];
            listOfAllColumnNames[key] = true;
            for(var i = 0; i < dataset.length; i++) {
                if(!data.hasOwnProperty(dataset[i].Date)) {
                    data[dataset[i].Date] = {};
                }
                data[dataset[i].Date][key] = dataset[i].Amount;
            }
        }
    }
    // uses the list of all column names to check if the data structure has
    // the required columns in every date. if one is missing, null is added
    listOfAllColumnNames = Object.keys(listOfAllColumnNames);
    for(var dateKey in data) {
        if(data.hasOwnProperty(dateKey)) {
            for(var m = 0; m < listOfAllColumnNames.length; m++) {
                if(!data[dateKey].hasOwnProperty(listOfAllColumnNames[m])) {
                    data[dateKey][listOfAllColumnNames[m]] = null;
                }
            }
        }
    }
    // the dates may be sent in a random order, c3.js however displays the
    // columns in the given order. therefore, the dates are ordered here
    var temporaryDates = [];
    for(var date in data) {
        if(data.hasOwnProperty(date)) {
            temporaryDates.push(date);
        }
    }
    temporaryDates.sort(function(a, b) {
        return new Date(a) - new Date(b);
    });
    // the final data structure consists of a nested array with the first
    // column being the date column. While looping through the attributes of
    // the data, it needs to be checked, if the attributes are already (from
    // a previous date) are in the resulting column list
    var columns = [['Date']];
    for(var j = 0; j < temporaryDates.length; j++) {
        columns[0].push(temporaryDates[j]);
        for(var columnName in data[temporaryDates[j]]) {
            var index = -1;
            // check if the attribute is already in the resulting data structure
            for(var k = 1; k < columns.length; k++) {
                if(columns[k][0] === columnName) {
                    index = k;
                    break;
                }
            }
            // if the attribute is not yet in the resulting data structure, create a new column
            if(index === -1) {
                columns.push([columnName]);
                index = columns.length - 1;
            }
            columns[index].push(data[temporaryDates[j]][columnName]);
        }
    }
    return columns;
}