разбор данных JSON для визуализации высокого график график

Это мой образец Json, я пытаюсь отобразить эти данные в виде высокой диаграммы графа,разбор данных JSON для визуализации высокого график график

Мой план заключается в выборе батареи Average по Y-оси и на оси х ОС-версия.

Поэтому я могу сравнить каждую модель со всеми версиями os.

Например, как показано на рисунке

значения как батареи в среднем названий городов будет в Os-версии, каждый проецируется бар на графике той же модели, но с diffrent версией ОС.

Я не мог понять, как разобрать данные JSON для отображения в нем в графе

[ 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "7.0", 
     "batteryavg": "100", 
     "sampleyqty": "42" 
    }, 
    { 
     "model": "LG-H961S", 
     "osversion": "6.0", 
     "batteryavg": "98", 
     "sampleyqty": "73" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "5.1.0", 
     "batteryavg": "50", 
     "sampleyqty": "53" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "6.2.0", 
     "batteryavg": "100", 
     "sampleyqty": "55" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5", 
     "osversion": "6.0", 
     "batteryavg": "20", 
     "sampleyqty": "9" 
    }, 
    { 
     "model": "GOOGLE NEXUS 4", 
     "osversion": "5.1", 
     "batteryavg": "98", 
     "sampleyqty": "4" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "12", 
     "sampleyqty": "22" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "46", 
     "sampleyqty": "64" 
    }, 
    { 
     "model": "F5121", 
     "osversion": "6.0.1", 
     "batteryavg": "94", 
     "sampleyqty": "15" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5", 
     "osversion": "5.1", 
     "batteryavg": "34", 
     "sampleyqty": "55" 
    }, 
    { 
     "model": "SM-A500F", 
     "osversion": "5.0.2", 
     "batteryavg": "44", 
     "sampleyqty": "33" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5", 
     "osversion": "5.1", 
     "batteryavg": "74", 
     "sampleyqty": "81" 
    }, 
    { 
     "model": "GOOGLE NEXUS 4", 
     "osversion": "5.1", 
     "batteryavg": "75", 
     "sampleyqty": "62" 
    }, 
    { 
     "model": "REDMI NOTE 3", 
     "osversion": "5.0.2", 
     "batteryavg": "13", 
     "sampleyqty": "12" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5", 
     "osversion": "5.1", 
     "batteryavg": "87", 
     "sampleyqty": "72" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "7.0", 
     "batteryavg": "52", 
     "sampleyqty": "21" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "85", 
     "sampleyqty": "34" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "56", 
     "sampleyqty": "51" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "56", 
     "sampleyqty": "11" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "86", 
     "sampleyqty": "22" 
    }, 
    { 
     "model": "NEXUS 6", 
     "osversion": "7.0", 
     "batteryavg": "88", 
     "sampleyqty": "11" 
    }, 
    { 
     "model": "SAMSUNG GALAXY S6", 
     "osversion": "5.0", 
     "batteryavg": "23", 
     "sampleyqty": "84" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "7.1.1", 
     "batteryavg": "87", 
     "sampleyqty": "12" 
    }, 
    { 
     "model": "SAMSUNG GALAXY S6", 
     "osversion": "5.0", 
     "batteryavg": "65", 
     "sampleyqty": "42" 
    }, 
    { 
     "model": "GOOGLE NEXUS 4", 
     "osversion": "5.1", 
     "batteryavg": "56", 
     "sampleyqty": "32" 
    }, 
    { 
     "model": "LG-H961S", 
     "osversion": "6.0", 
     "batteryavg": "64", 
     "sampleyqty": "54" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "6.0", 
     "batteryavg": "53", 
     "sampleyqty": "17" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "7.0", 
     "batteryavg": "75", 
     "sampleyqty": "32" 
    }, 
    { 
     "model": "F5321", 
     "osversion": "6.0.1", 
     "batteryavg": "64", 
     "sampleyqty": "52" 
    }, 
    { 
     "model": "F5321", 
     "osversion": "6.0.1", 
     "batteryavg": "64", 
     "sampleyqty": "22" 
    }, 
    { 
     "model": "ALE-L21", 
     "osversion": "5.0.1", 
     "batteryavg": "76", 
     "sampleyqty": "52" 
    }, 
    { 
     "model": "HUAWEI MT7-TL10", 
     "osversion": "6.0", 
     "batteryavg": "53", 
     "sampleyqty": "4" 
    }, 
    { 
     "model": "F5321", 
     "osversion": "6.0.1", 
     "batteryavg": "43", 
     "sampleyqty": "51" 
    }, 
    { 
     "model": "HUAWEI MT7-TL10", 
     "osversion": "6.0", 
     "batteryavg": "22", 
     "sampleyqty": "20" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "7.0", 
     "batteryavg": "32", 
     "sampleyqty": "31" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "6.0", 
     "batteryavg": "74", 
     "sampleyqty": "13" 
    }, 
    { 
     "model": "F5321", 
     "osversion": "6.0.1", 
     "batteryavg": "86", 
     "sampleyqty": "52" 
    }, 
    { 
     "model": "NEXUS 5", 
     "osversion": "6.0", 
     "batteryavg": "54", 
     "sampleyqty": "22" 
    }, 
    { 
     "model": "NEXUS 6P", 
     "osversion": "6.0", 
     "batteryavg": "77", 
     "sampleyqty": "32" 
    }, 
    { 
     "model": "GOOGLE NEXUS 5X", 
     "osversion": "7.0", 
     "batteryavg": "99", 
     "sampleyqty": "12" 
    } 
]

Я ожидал userSeriesData данные как

[{ 
    "data": [ 
     ["GOOGLE NEXUS 5X", 100], 
     ["NEXUS 6P", 77], 
     ["HUAWEI MT7-TL10", 53], 
     ["LG-H961S", 64], 
     ["GOOGLE NEXUS 5", 20], 
     ...., 
     ...., 
     so on 

    ], 
    "osversion": "6.0" 
},{ 
    "data": [ 
     ["GOOGLE NEXUS 5X", 50], 
     ["GOOGLE NEXUS4", 98], 
     ["GOOGLE NEXUS 5", 34], 
     ...., 
     ...., 
     so on 

    ], 
    "osversion": "5.1.0" 
}]

Это как i начато:

const userSeriesData = userData.reduce((topAccum, parent, index) => { 
    if (parent && Object.keys(parent).length > 0) { 
     const childReduce = Object.keys(parent).reduce((childAccum, child, i) => { 
      childAccum.osversion = parent['osversion'] 
      childAccum.data.push(parent['modelcode'], parent['sampleqty']) 
      return childAccum 
     }, { 
      osversion: '', 
      data: [] 
     }) 
     topAccum.series.push(childReduce) 
    } 
    return topAccum; 
}, { 
    series: [] 
})

JFYI: Пример JSON - это фиктивные данные, но он будет выглядеть более или менее одинаковым, со случайными версиями ОС, номером модели, средними значениями батареи

Большое вам спасибо за помощь.

источник

2017-02-22 Sr070960

Не могли бы вы опубликовать код, который вы пытались – user93

Здесь представляет собой комплексное решение, используя часть ваших данных:

const json = [{ 
    "model": "GOOGLE NEXUS 5X", 
    "osversion": "7.0", 
    "batteryavg": "100", 
    "sampleyqty": "42" 
}, { 
    "model": "LG-H961S", 
    "osversion": "6.0", 
    "batteryavg": "98", 
    "sampleyqty": "73" 
}, { 
    "model": "GOOGLE NEXUS 5X", 
    "osversion": "5.1.0", 
    "batteryavg": "50", 
    "sampleyqty": "53" 
}, { 
    "model": "NEXUS 6P", 
    "osversion": "6.2.0", 
    "batteryavg": "100", 
    "sampleyqty": "55" 
}, { 
    "model": "GOOGLE NEXUS 5", 
    "osversion": "6.0", 
    "batteryavg": "20", 
    "sampleyqty": "9" 
}, { 
    "model": "GOOGLE NEXUS 4", 
    "osversion": "5.1", 
    "batteryavg": "98", 
    "sampleyqty": "4" 
}, { 
    "model": "NEXUS 6P", 
    "osversion": "7.1.1", 
    "batteryavg": "12", 
    "sampleyqty": "22" 
}, { 
    "model": "NEXUS 6P", 
    "osversion": "7.1.1", 
    "batteryavg": "46", 
    "sampleyqty": "64" 
}, { 
    "model": "F5121", 
    "osversion": "6.0.1", 
    "batteryavg": "94", 
    "sampleyqty": "15" 
}, { 
    "model": "GOOGLE NEXUS 5", 
    "osversion": "5.1", 
    "batteryavg": "34", 
    "sampleyqty": "55" 
}, { 
    "model": "SM-A500F", 
    "osversion": "5.0.2", 
    "batteryavg": "44", 
    "sampleyqty": "33" 
}, { 
    "model": "GOOGLE NEXUS 5", 
    "osversion": "5.1", 
    "batteryavg": "74", 
    "sampleyqty": "81" 
}, { 
    "model": "GOOGLE NEXUS 4", 
    "osversion": "5.1", 
    "batteryavg": "75", 
    "sampleyqty": "62" 
}, { 
    "model": "REDMI NOTE 3", 
    "osversion": "5.0.2", 
    "batteryavg": "13", 
    "sampleyqty": "12" 
}, { 
    "model": "GOOGLE NEXUS 5", 
    "osversion": "5.1", 
    "batteryavg": "87", 
    "sampleyqty": "72" 
}, { 
    "model": "GOOGLE NEXUS 5X", 
    "osversion": "7.0", 
    "batteryavg": "52", 
    "sampleyqty": "21" 
}] 

// Create categories object in order to remove duplicates 
const cats = {} 
json.forEach((o) => cats[o.model] = 1) 
const categories = Object.keys(cats) 

// Parse your data 
let series = json.reduce((acc, o) => { 
    // Check if array already defined 
    if (acc[o.osversion] && acc[o.osversion].data) { 
     // Push to array new values 
     acc[o.osversion].data.push({x: categories.indexOf(o.model), y: Number(o.batteryavg)}) 
    } else { 
     // Create new array with first value 
     acc[o.osversion] = { data: [{x: categories.indexOf(o.model), y: Number(o.batteryavg)}] } 
    } 
    return acc 
    }, {}) 

// Convert object to array 
series = Object.keys(series).map((key) => { 
series[key].name = key 
    return series[key] 
}) 

series = series.map(serie => { 
serie.data.sort((a, b) => a.x - b.x) 
    return serie 
}) 
console.log(series, categories) 

// Chart options 
const options = { 
xAxis: { categories: categories }, 
chart: { type: 'column' }, 
    series: series 
} 

// Create chart 
const chart = Highcharts.chart('container', options)

Живой пример: https://jsfiddle.net/t698oqmm/

Пример вывода:

источник

2017-02-22 16:32:32 stpoa

Hej Спасибо за вашу помощь. Одна проблема, однако, в массиве Data Data первые два элемента в каждом массиве были неправильно отформатированы, по какой-либо конкретной причине? – Sr070960

oops, Теперь я понял, что это решения, кажется, ошибочны. только первая модель показывает правильный дисплей, вторая группа содержит смесь разных моделей. а также 3-я группа Мое желание состояло в том, чтобы разделить каждую модель на группу с различными столбцами столбцов osverison – Sr070960

Я отредактировал это сообщение выше. – stpoa

$.ajax({ 
       type: 'post', 
       url: "Relatorios/getJobsPie", 
       data: { "startDate" : datastart, "endDate": dataend , "cliente" : $("#cliente").val() , 'statusjob':$("#status").val() , 'search' :$("#search").val()}, 
       success: function($response) { 
         response = $.parseJSON(reponse); 
         var objects =[]; 
         $.each(response, function(k, v) { 
          var date = new Date(v.data_conclusao); 
          objects.push([date.getMonth(), v.qnt.toNum()]); 
         }); 

         var datos = [{ 
          name: 'Name', 
          data: objects  
         }];  

         $('.piechart').highcharts({ 
          chart: { 
           marginTop: 80,   
           type: 'column', 
           spacingLeft: -15 
          }, 
          title: { 
           text: '' 
          },  
          series: datos 
         })       

       } 
      });

источник

2017-02-22 01:58:20

разбор данных JSON для визуализации высокого график график

ответ

Смежные вопросы