将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);