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

Question

我的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" 
      } 
     } 

    } 
    }); 

Answer 1

这是您输入数据的转换函数。您无需在每个数据集中输入每个日期。您也无需为每个日期输入每个属性。

// 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; 
}