![](/img/trans.png)
[英]Issue implementing sample line chart from Chartis.js using GWT JSNI native method
[英]Convert object to Chartis.js structure
有人可以幫助我將以下結構轉換為Chartist.js結構嗎? 我使用chartis.js顯示折線圖。 我需要將下面的JSON轉換為對象結構。
<code>
data = {
"el1": [{
"date": "2017.01",
"data1": {
"series_1": {
"a": 10,
"b": 20,
"c": 50,
"d": 15,
"e": 8
},
"Series_2": {
"yes": 5,
"no": 3
},
"Series_3": {
"s": 2,
"n": 9
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.02",
"data1": {
"series_1": {
"a": 56,
"b": 23,
"c": 45,
"d": 69,
"e": 14
},
"Series_2": {
"yes": 2,
"no": 1
},
"Series_3": {
"s": 6,
"n": 4
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.03",
"data1": {
"series_1": {
"a": 15,
"b": 12,
"c": 10,
"d": 54,
"e": 4
},
"Series_2": {
"yes": 20,
"no": 16
},
"Series_3": {
"s": 9,
"n": 7
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}
]
};
</code>
我需要這樣的對象:
<code>
var example = [
{
labels: ['2017.01', '2017.02', '2017.03'] , series: [10,56,15], [20,23, 12], [50,45,10], [15, 69, 54], [8,14,4]},
labels: ['2017.01', '2017.02', '2017.03'] , series: [5,2,20], [3,1, 16]},
labels: ['2017.01', '2017.02', '2017.03'] , series: [2,6,9], [9,4, 7]},
] ;
</code>
請檢查數字和托盤以比較JSON和輸出,以更好地理解外觀。 對不起我的英語不好 !
謝謝您的幫助! 最好的祝福!
您可以迭代數組並可以將其處理為所需的結果...
function getFormatted(data) { var _newData = {}; var allSeries = []; data.el1.forEach(function(el){ _newData[el.date] = el.data1; if(allSeries.length==0) allSeries = Object.keys(el.data1); }); return allSeries.map(function(el) { var obj = { labels: [], series: [] }; obj.labels = Object.keys(_newData); Object.keys(_newData).forEach(function(_el) { obj.series.push(Object.keys(_newData[_el][el])); }); var _newSeries = []; obj.series[0].forEach(function(el, i){ _newSeries.push([el, obj.series[1][i]]); }); obj.series = _newSeries; return obj; }); } var data = { "el1": [{ "date": "2017.01", "data1": { "series_1": { "a": 1, "b": 2, "c": 3, "d": 4, "e": 5 }, "Series_2": { "yes": 1, "no": 2 }, "Series_3": { "s": 1, "n": 2 } }, "text": [{ "t": "header", "c": "text" }, { "t": "header2", "c": "text2" }] }, { "date": "2017.02", "data1": { "series_1": { "a2": 1, "b2": 2, "c2": 3, "d2": 4, "e2": 5 }, "Series_2": { "yes2": 1, "no2": 2 }, "Series_3": { "s2": 1, "n2": 2 } }, "text": [{ "t": "header", "c": "text" }, { "t": "header2", "c": "text2" }] }] }; console.log(getFormatted(data));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.