如何将我的json结构转换为C3.js所需的列结构
How to convert my json structure to the column structure required by C3.js
下面列出了我的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;
}
相关文章:
- 下划线扩展方法和结构.js子类
- 如何使用结构 JS 实现对比度
- 文本框导致结构 JS 中的字体出现问题
- 如何使用 OnClick 事件更改结构 JS 的覆盖图像
- 结构 JS:如何防止扩展活动组
- 如果其他语句层次结构 JS
- 如何删除锁定缩放结构JS
- 重新创建结构.js画布并导出为图像
- 缩放结构.js画布对象
- 使用结构 js 向右/向左倾斜画布文本对象
- 如何在结构.js的画布上触发自定义事件
- 结构 JS:在鼠标按下时复制/粘贴对象
- 展开结构.js中的状态属性
- 如何在结构js中找出多边形的绝对坐标
- 在结构.js中对图像进行动画处理
- 如何设置结构.js
- 如何使用结构 JS 删除画布中的第二个对象
- 使用结构 js 屏蔽两个图像
- 从 SVG 加载的结构 JS 形状的位置不正确
- 使用结构.js在画布中撤消和重做命令