将 JSON 数据转换为 Highcharts 基本折线图中的格式答案

【问题标题】：Convert JSON data into format in Highcharts' basic line chart将 JSON 数据转换为 Highcharts 基本折线图中的格式
【发布时间】：2015-04-27 22:12:29
【问题描述】：

使用 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 中的名称匹配
  - 在匹配的seriesArray[i].data 数组中增加一个计数器，使用originalArray[i][1] 的值作为索引（始终为0-11）。

所以我问：

有什么好方法可以遍历我的originalArray，匹配唯一值，然后仅对这些匹配项进行操作以推送到desiredArray。
在desiredArray[i].data 中增加计数器的最佳方法是什么？

我愿意使用库，例如 underscore.js。几天来一直在尝试解决这个问题，所以几乎所有东西都在 Javascript 的范围内。

【问题讨论】：

顺便说一句，你在desiredArray中的valueB条目中的计数是错误的，我认为......数据[3]中应该有一个1？
@SMcCrohan 不错，已更新

标签： javascript jquery arrays json highcharts

【解决方案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]}; 
});

我们在这里做的是一个多步骤的过程：

通过首先扫描原始数组中的最大值来确定我们的数组需要多大。
使用对象聚合计数（使用Array.reduce()）。
将对象及其属性转换为名称/数据对对象数组（使用Array.map）。

【讨论】：

请注意——据我所知，搜索max 不仅没有必要，而且实际上是有害的。该数组的长度应始终为 12，每个月一个。如果从originalArray 中删除valueC，则结果将不正确。
嗯，同意。不确定是否稍后将其添加到问题中，或者我是否读过它，但如果数组可靠地始终具有相同的大小，那么是的，该检查是无关的。
不，它从一开始就在那里。也许我应该发表评论，而不仅仅是提供我的解决方案。如果@SeanConnelly 发现它不起作用，他可能会回来。 :-)

【解决方案2】：

编辑：对 S McCochran 的解决方案进行了改进，跳过了对 originalArray 中最大值的无关搜索，因为每个数据数组应该始终有 12 个元素，每月一个。 p>

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

【讨论】：