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

Question

我正在嘗試使用Javascript將一些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]
  }]

對於某些其他上下文， originalArray[i][1]的0-11表示一個月（0 =一月），而desiredArray是唯一名稱的列表以及它們按月出現的次數。

到目前為止，我可以：

• 將數據轉換為新的對象數組
• 對於originalArray每個唯一名稱
  • 在desiredArray創建一個新對象，並設置name屬性
  • 添加一個包含空數組的data屬性

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

• 遍歷originalArray
  • 如果originalArray中的名稱與desiredArray中的名稱匹配
    • 使用originalArray[i][1]作為索引（始終為0-11），在匹配的seriesArray[i].data數組中增加一個計數器。

所以我問：

1. 遍歷我的originalArray ，匹配唯一值， 然后僅對那些匹配進行操作以推送到所需的desiredArray的好方法是什么？
2. 什么是增加desiredArray[i].data計數器的最佳方法

我願意使用諸如underscore.js之類的庫。 幾天來一直在試圖解決這個問題，所以幾乎所有事情都在Javascript的范圍內。

Answer 1

現在，使用正確的數組初始化進行了更新。

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]}; 
});

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

1. 通過首先掃描原始數組中的最大值來確定數組的大小。

2. 使用一個對象來聚合計數（使用Array.reduce() ）。

3. 將對象及其屬性轉換為名稱/數據對對象數組（使用Array.map ）。

Answer 2

編輯 ：對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);