[英]Formatting an array as JSON for input into Google Charts API?
[英]Formatting JSON for Google Charts API
使用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
}
]
}
我正在使用Google Charts API,我想將這些點繪制到折線圖中。 (請參見代碼段)
<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>
使用我提供的JSON,將數據壓縮為Google Charts API接受的格式的最有效方法是什么? 我研究過D3,但它似乎有較高的學習曲線,這是最推薦的路線嗎? 以其他方式查詢數據集/匯總結果會更好嗎?
非常感謝您的幫助,因為這是一個為期2天的冒險活動!
更新-TL; DR無論有效負載有多大,我都需要一個格式#1 =>格式#2的腳本。
格式#1-myObj
格式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
}]
}
]
}
查看您的數據以及如何格式化數據,類似下面的內容將起作用。 您將需要遍歷每個對象以獲得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]
});
}
});
}
}
帶有Google Chart的JSFiddle示例 (打開控制台可查看格式化的數據)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.