格式化Google Charts API的JSON
[英]Formatting JSON for Google Charts API
问题描述
Using MongoDB / Node consider the following payload: 
使用MongoDB / Node时，请考虑以下有效负载：
var myObj = {
"date" : "1-23-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
},
{
"date" : "1-24-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
}
I am using Google Charts API and I would like to plot these points to a line graph. 我正在使用Google Charts API，我想将这些点绘制到折线图中。 (see snippet) （请参见代码段）
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); var myObj = { "cols": [{ "id": "", "label": "year", "type": "string" }, { "id": "", "label": "sales", "type": "number" }, { "id": "", "label": "expenses", "type": "number" }], "rows": [{ "c": [{ "v": "2001" }, { "v": 3 }, { "v": 5 }] }, { "c": [{ "v": "2002" }, { "v": 5 }, { "v": 10 }] }, { "c": [{ "v": "2003" }, { "v": 6 }, { "v": 4 }] }, { "c": [{ "v": "2004" }, { "v": 8 }, { "v": 32 }] }, { "c": [{ "v": "2005" }, { "v": 3 }, { "v": 56 }] }] } function drawChart() { var data = new google.visualization.DataTable(myObj); var options = { title: 'My Chart', curveType: 'function', legend: { position: 'right' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 100%; height: 500px"></div> </body> </html>
Using the JSON I am provided, what would be the most effective way to massage the data into the format accepted by Google Charts API? 使用我提供的JSON，将数据压缩为Google Charts API接受的格式的最有效方法是什么？ I have looked into D3 but it seemed to have a higher learning curve, would that be the most recommended route? 我研究过D3，但它似乎有较高的学习曲线，这是最推荐的路线吗？ Would it be better to query the dataset differently / aggregate the result? 以其他方式查询数据集/汇总结果会更好吗？
Help is much appreciated, as this has been a 2 day long venture! 非常感谢您的帮助，因为这是一个为期2天的冒险活动！
Update -- TL;DR I need a script that goes from Format #1 => Format #2, no matter how big the payload is. 更新-TL; DR无论有效负载有多大，我都需要一个格式＃1 =>格式＃2的脚本。
Format #1 - myObj 格式＃1-myObj
Format #2 - 格式2-
var myObj = {
"cols": [{
"label": "Date",
"type": "string"
}, {
"label": "a",
"type": "number"
}, {
"label": "b",
"type": "number"
}, {
"label": "c",
"type": "number"
}, {
"label": "d",
"type": "number"
}, {
"label": "e",
"type": "number"
}, {
"label": "f",
"type": "number"
}, {
"label": "g",
"type": "number"
}, {
"label": "h",
"type": "number"
}, {
"label": "i",
"type": "number"
}
],
"rows": [{
"c": [{
"v": "day1"
}, {
"v": 300
}, {
"v": -500
}, {
"v": 23
}, {
"v": 120
}, {
"v": 150
}, {
"v": 1210
}, {
"v": 160
}, {
"v": 180
}, {
"v": 190
}]
}, {
"c": [{
"v": "day2"
}, {
"v": 1300
}, {
"v": -5200
}, {
"v": 253
}, {
"v": 6120
}, {
"v": 1350
}, {
"v": 110
}, {
"v": 2160
}, {
"v": 1180
}, {
"v": 1190
}]
}
]
}
1 个解决方案
解决方案1
4 已采纳 2015-07-02 18:01:33
Looking at your data and how it needs to be formatted, something like the below would work. 查看您的数据以及如何格式化数据，类似下面的内容将起作用。 You will need to loop over each object to get the cols and then map over each array to get the rows . 您将需要遍历每个对象以获得cols ，然后映射到每个数组以获得行 。
var dataObj = {
"cols": [],
"rows": []
};
for(property in myObj) {
if(typeof myObj[property] === 'string') {
dataObj.cols.push({
"label": property,
"type": "string"
});
} else {
dataObj.rows.push({
"c": []
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"date": "day" + dataObj.rows.length // The day: 1, 2, 3, etc.
});
myObj[property].map(function(object) {
for(prop in object) {
dataObj.cols.push({
"label": prop,
"type": "number"
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"v": object[prop]
});
}
});
}
}
JSFiddle with Google Chart example (Open Console to see formatted data) 带有Google Chart的JSFiddle示例 （打开控制台可查看格式化的数据）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.