2015-09-18 3 views
1

У меня есть круговая диаграмма, которая получает свои данные из файла. В сыром виде, это data:Форматирование данных в формате Highcharts Chart

[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renwables","load":"10"}] 

Я пытаюсь сделать метод, который форматирует эти данные правильно, так что он может быть использован в круговой диаграмме. Однако только Names проходят правильно, при этом все проценты равны 0. У меня такое ощущение, что это связано с тем, что необработанные данные сохраняются как строка. Но с использованием parseInt() по данным, прежде чем нажимать не поможет, и === проверяет возврат num. Вот код, который я пытаюсь реализовать.

function setPieData(data){ 
    var json = JSON.parse(data); 
    var fuelTypes = [{name: 'Dual',load:[]}, 
        {name: 'Gas', load:[]}, 
        {name: 'Other_Fossil_Fuels', load:[]}, 
        {name: 'Nuclear', load: []}, 
        {name: 'Hydro', load: []}, 
        {name: 'Wind', load: []}, 
        {name: 'Other_Renwables', load:[]}]; 

    for(i=0; i < json.length; i++){ 
     if(json[i].name == fuelTypes[i].name){ 

      fuelTypes[i].load.push(parseInt(json[i].load)); 

     } 
     if(fuelTypes[i].load === parseInt(fuelTypes[i].load, 10)){ 
      alert("not num"); 
     }else{ 
      alert("num"); 
     } 
    } 

    drawChart(fuelTypes); 
} 

function drawChart(stuff){ 
    var globalDate = new Date(); 
    var dMth = globalDate.getMonth() + 1; 
    var dDay = globalDate.getDate(); 
    var dYr = globalDate.getFullYear(); 
    var dStr = dMth + '/' + dDay + '/' + dYr; 
    title = "Real-time Fuel Mix " + dStr; 

    var seriesData= stuff; 



    Highcharts.setOptions({ 
     colors: ['#C00000', '#FF0000', '#7F7F7F', '#FFC000', '#4F81BD', '#00B050', '#92D050'] 
     }); 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 

     title: { 
      text: title 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       }, 
       showInLegend: true 
      } 
     }, 
     series: [{ 
      name: "MI Power", 
      colorByPoint: true, 
      data: stuff 
     }] 

ответ

1

создать массив и нажмите ваши данные, такие как следующие

var dataPie =[]; 
var abc =your data //your json 
$.each(abc,function(i,el) 
{ 
    dataPie.push({name :el.name,y: parseInt(el.load)}); 
}); 

использование dataPie в функции DrawChart.

вид деятельности fiddle here

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