Gestapelte Spalte mit c3.js mit externen Daten

Question

Ich zeichnete eine Analyse von Beschwerden auf einem gestapelten Säulendiagramm.

Ich schaffte es, mein Diagramm mit c3.js und den externen Daten arbeiten zu lassen. See the screen shot

Der Code ist jedoch nur 3 Probleme von den externen Daten. Die Daten stammen von einer offenen Plattform. Check out how it looks

Ich habe Javascript verwendet.

Hier ist der Code. Das Snippet zeigt, wie ich die Daten konvertiert und auf c3.js bearbeitet habe.

`

$(document).ready(function() { 

$.getJSON('http://opendata.arcgis.com/datasets/4ceee74d7dce4445b5c6582722b8c523_0/FeatureServer/0/query?where=1%3D1&outFields=ISSUE,PERCENTAGE,YEAR&outSR=4326&f=json', function(complaint_data){ 

     var open_data = complaint_data.features; 
     var i, j, k; 


     var dataset = []; 
     var dataset2 = []; 
     var dataset3 = []; 
     var dataset_final = []; 
     var modified_data = []; 

     var mini_data = []; 
     var mini_data2 = []; 
     var mini_data3 = []; 

     // Get all non-zero percentages 
     for(i=0,k=0; i<open_data.length; ++i,++k){ 

      v = parseFloat(open_data[i]['attributes']['PERCENTAGE'].split('%')); 

      if(v > 0){ 
       modified_data[k] = open_data[i]; 
      }else{ 
       --k; 
      } 


     } 

     //console.log(modified_data) 
     full_data = [] 
     some_d = []; 

     for(j=0; j<modified_data.length; ++j){ 


      pvalue = parseFloat(modified_data[j]['attributes']['PERCENTAGE'].split('%')); 


      if(modified_data[j]['attributes']['ISSUE']=="Abuse Of Power"){ 

       mini_data.push(pvalue) 

       dataset[modified_data[j]['attributes']['ISSUE']] = { 

        data:mini_data 
       } 

      }else if(modified_data[j]['attributes']['ISSUE']=="Delay"){ 

       mini_data2.push(pvalue) 

       dataset2[modified_data[j]['attributes']['ISSUE']] = { 

        data:mini_data2 
       } 
      }else if(modified_data[j]['attributes']['ISSUE']=="Inefficiency"){ 

       mini_data3.push(pvalue) 

       dataset3[modified_data[j]['attributes']['ISSUE']] = { 

        data:mini_data3 
       } 
      } 


     } 

     dataset_final2 = ['Abuse_Of_Power'] 
     dataset_final3 = ['Delay'] 
     dataset_final4 = ['Inefficiency'] 

     for(q=0;q<dataset['Abuse Of Power']['data'].length; q++){ 
      dataset_final2.push(dataset['Abuse Of Power']['data'][q]) 
      dataset_final3.push(dataset2['Delay']['data'][q]) 
      dataset_final4.push(dataset3['Inefficiency']['data'][q]) 
     } 



     // console.log(full_data) 

     var chart = c3.generate({ 
      bindto: '#c3_container', 
      title:{ 
       text: 'Analysis Of Complaints Received By Service Issues, Abuse of Power, Delay, Inefficiency 2012-2015' 
      }, 
      data: { 
       columns: [ 
        dataset_final2, 
        dataset_final3, 
        dataset_final4 
       ], 
       type: 'bar', 
       groups: [ 
        ['Abuse_Of_Power', 'Delay', 'Inefficiency'] 
       ], 
      }, 

      grid: { 
       y: { 
        show:true 
       } 
      }, 
      axis: { 
       x: { 
        type: 'category', 
        categories: ['by 31-Dec-2012','by 31-Dec-2013', 'by 31-Dec-2014', 'by 31-Dec-2015'], 
        label: 'Year' 
       }, 
       y: { 
        label: 'Percentage %', 
        tick: { 
         format: function (d) { return d+"%"; } 
        } 

       } 
      } 
     }); 


    }) 
     }); 

`

Meine Frage ist, wie kann ich alle Fragen/Beschwerden in das Graphen erhalten, ohne wenn else-Anweisungen durchlaufen. Ich denke, es gibt eine effizientere Möglichkeit, das gestapelte Diagramm zu planen, wenn man bedenkt, wie die Daten von der offenen Plattform kommen. Ich weiß nicht, wie man Javascript benutzt. Irgendwelche Ideen, um mich in eine gute Richtung zu lenken?

Answer 1

Wenn Sie nicht mit sonst gehen möchten, müssen Sie Json von Server-Seite erstellen und dann müssen Sie es direkt rendern. So in c3.js gibt es immer ersten Wert wird

Dies ist nur grobe Vorstellung Daten Name heißt

{ "obj":{ 
['data1',12,33,34,43], 
['data2',22,44,55,66] 

} } sein. aber du kannst mit dieser Richtung gehen. Hoffe das wird helfen.