2015-12-08 57 views
0

我很難用json數據填充餅圖。谷歌餅圖不會填充

function drawChart() { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    var dataArray = []; 
    var innerArray = []; 

    $.ajax({ 
     url:"/investigation/getCauses.do?disaster_type="+$("#disasterTypeLv3").val() 
     ,dataType:"json" 
    }).done(function(jsdata){ 
     console.log(jsdata); 

     if(jsdata.causes!=undefined && jsdata.causes.length>0){ 
      causes = jsdata.causes; 



      for(var i=0; i<causes.length; i++){ 
       cause = causes[i]; 
       console.log([cause.category_nm, cause.ccnt]); 
       innerArray[i] = [cause.category_nm, cause.ccnt]; 
      } 
      //arrayToDataTable method 
      dataArray[0] = innerArray; 
      data = google.visualization.arrayToDataTable(dataArray); 

      //using an array 
      //data.addRows(innerArray); 
      console.log(innerArray); 
      console.log([ 
         ['Mushrooms', 7], 
         ['Onions', 1], 
         ['Olives', 1], 
         ['Zucchini', 1], 
         ['Pepperoni', 2], 
         ['Olives', 1], 
         ['Zucchini', 1], 
         ['Pepperoni', 2] 
         ]); 
     } 

    }); 






    // Set chart options 
    var options = { 
       //'title':'H ow Much Pizza I Ate Last Night' 
       'width':380 
       ,'height':380 
       //,chartArea:{width: '200', height:'200'}    
    }; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

無論arrayToDataTable也不addRows填充我的圖表。
第一次登錄innserArray並且第二次登錄來自Google Developers的示例代碼產生相同的結果。

我得到no dataarrayToDataTableinnerArray。 一切正常,當我簡單地用下面的數組變量替換。

data.addRows([ 
       ["Mushrooms", 7], 
       ["Onions", 1], 
       ["Olives", 1], 
       ["Zucchini", 1], 
       ["Pepperoni", 2], 
       ["Olives", 1], 
       ["Zucchini", 1], 
       ["Pepperoni", 2] 
       ]); 

我在這裏錯過了什麼?

回答

1

請試試這個:

谷歌餅圖需要確定這些數據的標籤。

  • 食譜例如:蘑菇等

  • 計數:如:1,2,4-

    data.addRows([['Recipe','Count'],["Mushrooms", 7],["Onions", 1],["Olives", 1],["Zucchini", 1],["Pepperoni", 2],["Olives", 1],["Zucchini", 1], ["Pepperoni", 2] 
    ]); 
    
+0

感謝Abishek對於校正。這裏仍然是新手。欣賞它。 –

+0

我以爲'addRows()'是嚴格的數據行,而不是標籤?這不就是爲什麼有'addColumn()'? – Ascendant

+0

還不確定,但我只是想出了這個答案,當我嘗試刪除示例中添加行的標籤時,請點擊此處「https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=恩「它沒有也顯示圖。 –