转换JSON数据到格式Highcharts“基本路线图 [英] Convert JSON data into format in Highcharts' basic line chart

问题描述

使用JavaScript，我想一些JSON数据转换成Highcharts的基本线图使用的格式。

Using Javascript, I am trying to convert some JSON data into the format used in Highcharts' basic line chart.

我要开始：

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的0-11 [I] [1] 引用一个月（0 = 1月），以及 desiredArray 是唯一的名称的列表，并通过他们每个月发生的计数。

For some additional context, the 0-11 in originalArray[i][1] references a month (0 = January), and the desiredArray is a list of unique names and a count of their occurrences by month.

到目前为止，我可以：

• 中的数据转换对象的一个​​新的数组


• 对于每一个独特的名字 originalArray
  
  
  
  • 创建在 desiredArray ，并设定名称属性
  的新对象
  
  • 添加数据包含空数组属性
  
  
  • Convert the data into a new array of objects
  • For each unique name in originalArray
    • Create a new object in the desiredArray, and set the name attribute
    • Add a data attribute that contains an empty array

    但后来我遇到了麻烦，无法弄清楚如何：

    
    
    • 循环遍历 originalArray
      
      
      
      • 如果名称中的 originalArray 在名称匹配的 desiredArray
        
        
        
        • 递增匹配的计数器 seriesArray [I]。数据阵列，使用 originalArray值[I] [1] 作为指数（它始终是0-11）。
        
        
        • Loop through the originalArray
          • If the name in the originalArray matches the name in the desiredArray
            • Increment a counter in the matching seriesArray[i].data array, using the value of originalArray[i][1] as the index (it always be 0-11).

            于是我问：

            
            
            1. 什么是跨迭代的好方法我 originalArray ，投其所好独特的价值观，和然后采取行动，只有对那些比赛推到 desiredArray 。
            
            
            2. 什么是递增 desiredArray [I]。数据
            计数器的最佳方式
            
            1. What's a good way to iterate across my originalArray, match up unique values, and then act only on those matches to push to the desiredArray.
            2. What's the best way to increment the counters in desiredArray[i].data

            我愿意用库，如underscore.js。一直在努力，现在摸不着头脑了两天，所以pretty多的东西去的Javascript的范围之内。

            I'm open to using libraries, such as underscore.js. Have been trying to figure this out for a couple of days now, so pretty much anything goes within the bounds of Javascript.

            推荐答案

            更​​新适当数组初始化，现在。

            Updated with proper array initialization, now.

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

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

            What we're doing here is a multi-step process:

            
            

            1. 决定我们的阵列有多大将需要是，通过先扫描原始数组中的最大值。

            1. Decide how big our arrays are going to need to be, by first scanning for the largest value in the original array.

            使用对象来汇总计数（使用 Array.reduce（））。

            Use an object to aggregate the counts (using Array.reduce()).

            变换对象及其属性到名称/数据对对象的数组（使用 Array.map ）。

            Transform the object and its properties into an array of name/data pair objects (using Array.map).

            这篇关于转换JSON数据到格式Highcharts“基本路线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！