將JSON數據轉換爲Highcharts基本折線圖的格式

使用Javascript，我試圖將一些JSON數據轉換爲Highcharts基本折線圖中使用的格式。將JSON數據轉換爲Highcharts基本折線圖的格式

我不得不開始：

originalArray = [ 
    ['valueA', 1], 
    ['valueA', 0], 
    ['valueB', 9], 
    ['valueB', 9], 
    ['valueB', 3], 
    ['valueC', 11] 
]

什麼我試圖創建一個使用上面：

desiredArray = [{ 
     name: 'valueA', 
     data: [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
    }, { 
    name: 'valueB', 
    data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 0, 0] 
    }, { 
    name: 'valueC', 
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1] 
    }]

對於一些額外的背景下，0-11在originalArray[i][1]中引用了一個月（0 = 1月），並且desiredArray是按月計算的唯一名稱和計數。

到目前爲止，我可以：

中的數據轉換對象的一個新的數組
對於每一個獨特的名字originalArray
- 創建在desiredArray一個新的對象，並設置name屬性
- 添加包含空數組的data屬性

但後來我遇到了麻煩，無法弄清楚如何：

循環遍歷originalArray
- 如果originalArray名稱中的名稱相匹配desiredArray
  - 在匹配的seriesArray[i].data數組中增加一個計數器，使用值originalArray[i][1]作爲索引（它總是0-11）。

所以我問：

什麼是在我的originalArray遍歷一個很好的方式，投其所好獨特的價值觀，並然後在這些比賽僅作用推送到desiredArray。
什麼是遞增櫃檯desiredArray[i].data

最好的辦法我願意用庫，如underscore.js。一直想弄明白這一點，現在幾乎所有東西都在Javascript的範圍內。

來源

2015-04-27 Sean Connelly

順便說一下，在你的desiredArray進入VALUEB計數錯了，我想......應該有一個1數據[3]？ –

@ SMCrohan好抓，更新 –

代碼在哪裏？ –

現在更新爲正確的數組初始化。

var max = originalArray.reduce(function(p,c){return Math.max(p,c[1]);},0); 

var initSums = function(size) { 
    var arr = new Array(size); 
    for (var i=0;i<size;i++) 
     arr[i]=0; 
    return arr; 
} 

var map = originalArray.reduce(function(sums,val){ 
    if (!sums.hasOwnProperty(val[0])) { 
     sums[val[0]] = initSums(max+1); 
    } 
    sums[val[0]][val[1]]++; 
    return sums; 
},{}); 

var desiredArray = Object.keys(map).map(function(key) { 
    return {name: key, data: map[key]}; 
});

我們在這裏所做的是一個多步驟的過程：

決定我們的陣列有多大將需要是，通過先掃描最大值的原始數組中。
使用一個對象來聚合計數（使用Array.reduce()）。
將對象及其屬性轉換爲名稱/數據對象數組（使用Array.map）。

來源

2015-04-27 22:33:05

只是一個說明 - 據我瞭解的問題，不僅搜索'max'不必要，但它實際上是有害的。該陣列的長度應始終爲12，每個月一個。如果從'originalArray'中刪除'valueC'，結果將不正確。 –

嗯，同意。不知道是否稍後將此問題添加到問題中，或者如果我讀過它，但如果數組總是可靠始終是相同的大小，那麼是的，該檢查是無關緊要的。 –

那麼，它從一開始就在那裏。也許我應該評論一下，而不是僅僅提供我的解決方案。如果他發現它不能解決問題，@SeanConnelly可能會回來。 :-) –

編輯：在S McCochran的溶液的改進，跳過對最大值的外來搜索在originalArray，由於存在應始終是每個數據陣列的12個元素，每月之一。

function formatForHighcharts(array) { 

    // Create a map from value name to array of month counts 
    var map = originalArray.reduce(function(sums, pair) { 
    var key = pair[0], val = pair[1]; 

    if(!(key in sums)) 
     sums[key] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 

    // val is the month index, which corresponds directly to array index, so increase that 
    sums[key][val]++; 

    return sums; 
    }, {}); 

    // Map the object to an array of { name: ..., data: ... } pairs 
    var formatted = Object.keys(map).map(function (key) { 
    return { name: key, data: map[key] }; 
    }); 

    return formatted; 
}

用法：

var desiredArray = formatForHighcharts(originalArray);

來源

2015-04-27 23:15:09

將JSON數據轉換爲Highcharts基本折線圖的格式

回答

相關問題