使用具有外部數據的c3.js的堆積列

我設法讓我的圖使用c3.js和外部數據工作。 See the screen shot

但是，代碼只能從外部數據中獲得3個問題。數據來自一個開放的平臺。 Check out how it looks

我用javascript。

這是代碼。該片段顯示了我如何轉換數據並使其在c3.js上運行。

$(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+"%"; } 
        } 

       } 
      } 
     }); 


    }) 
     });

我的問題是如何能得到所有問題/投訴到圖形如果沒有else語句經歷。我認爲考慮數據來自開放平臺的方式，繪製堆積圖的方法更爲有效。我不知道如何去使用JavaScript。任何想法指向我的好方向？

來源

2017-04-04 Brian Hawi

如果你不想和其他人一起去，你必須從服務器端創建json，然後你必須直接渲染它。所以c3.js總有第一個值將是數據名稱即

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

}}

這只是粗略的想法。但你可以繼續這個方向。希望這會有所幫助。

來源

2017-04-05 12:24:14

使用具有外部數據的c3.js的堆積列

回答

相關問題