将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 [i] [1] 中的0-11表示一个月(0 =一月)，而 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 中创建一个新对象，并设置 name 属性
  • 添加包含空数组的 data 属性
  • 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 中的名称匹配
        • 使用 originalArray [i] [1] 的值作为索引(始终为0，在匹配的 seriesArray [i] .data 数组中增加一个计数器)-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] .data
            中增加计数器的最佳方法是什么
            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之类的库.几天来一直在努力解决这个问题，因此几乎所有内容都在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屋！