谷歌圖表API - 餅圖不顯示

Question

試圖獲取visualizations.PieChart的工作，但它繪製一個空白的白色框與標題，即使有數據。這是我的代碼。

<div id="globalramdonut" class="globalramdonut"></div> 


google.charts.load('current', {'packages':['corechart','gauge','line','controls','geochart']}); 
google.charts.setOnLoadCallback(drawAllCharts); 

var ramdonutdata; 
function setramdonutdata(){ 
    var query = "SELECT Location, SUM(RAMCapacityGB) AS 'RAM Capacity GB' FROM clusterstat WHERE Date = (SELECT MAX(Date) FROM clusterstat) GROUP BY Location ASC"; 
    //encode the query so we can submit it via URL. 
    var urlencoded = encodeURI(sql2json+query); 
    // get the data returned from 'urlencoded' 
    var jsonData = $.ajax({ 
     url: urlencoded, 
     dataType: "json", 
     async: false 
    }).responseText; 
    console.log(urlencoded); 
    // assign a google DataTable object 
    ramdonutdata = new google.visualization.DataTable(jsonData); 
} 

function drawRamDonut(){ 
    setramdonutdata(); 

    var options = { 
     title: 'RAM Capacity by Location', 
     pieHole: 0.4, 
     sliceVisibilityThreshold: 0 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('globalramdonut')); 
    chart.draw(ramdonutdata,options); 
} 

function drawAllCharts(){ 
    drawRamDonut(); 
} 

這裏是我的PHP腳本返回的數據....

{"cols":[{"label":"Location","type":"string"},{"label":"RAM Capacity GB","type":"number"}],"rows":[{"c":[{"v":"Amsterdam"},{"v":"12286.34"}]},{"c":[{"v":"Argentina"},{"v":"383.97"}]},{"c":[{"v":"Belgium"},{"v":"8189.33"}]},{"c":[{"v":"Brazil"},{"v":"2047.59"}]},{"c":[{"v":"California"},{"v":"14523.22"}]},{"c":[{"v":"Guadalajara"},{"v":"767.90"}]},{"c":[{"v":"Hong Kong"},{"v":"4351.54"}]},{"c":[{"v":"Massachusetts"},{"v":"3647.56"}]},{"c":[{"v":"Ontario"},{"v":"383.97"}]},{"c":[{"v":"Oregon"},{"v":"174896.81"}]},{"c":[{"v":"Shanghai"},{"v":"1279.90"}]},{"c":[{"v":"South Korea"},{"v":"383.19"}]},{"c":[{"v":"Tennessee"},{"v":"3327.52"}]},{"c":[{"v":"Texas"},{"v":"1535.64"}]},{"c":[{"v":"Tokyo"},{"v":"719.64"}]},{"c":[{"v":"Virginia"},{"v":"44882.59"}]}]} 

感謝您的閱讀。

Answer 1

首先，"RAM Capacity GB"列的值需要是數字，而不是字符串。
（失去引號）

{"c":[{"v":"Amsterdam"},{"v":12286.34}]}

的，而不是...

{"c":[{"v":"Amsterdam"},{"v":"12286.34"}]}

，應該使圖表顯示...

也強烈建議不是在上使用通話

而應使用done回調

建議設立類似下面的工作片段...

• 取代fail與done使用真實的URL
• 時，您可以將谷歌在load聲明中回調

google.charts.load('current', { 
 
    callback: function() { 
 
    var query = "SELECT Location, SUM(RAMCapacityGB) AS 'RAM Capacity GB' FROM clusterstat WHERE Date = (SELECT MAX(Date) FROM clusterstat) GROUP BY Location ASC"; 
 

 
    //var urlencoded = encodeURI(sql2json+query); 
 

 
    $.ajax({ 
 
     url: 'test', //urlencoded 
 
     dataType: 'json' 
 
    }).fail(function (jsonData) { // <-- change 'fail' to 'done' 
 

 
     // remove following when using with 'done' 
 
     jsonData = { 
 
     "cols":[ 
 
      {"label":"Location","type":"string"}, 
 
      {"label":"RAM Capacity GB","type":"number"} 
 
     ], 
 
     "rows":[ 
 
      {"c":[{"v":"Amsterdam"},{"v":12286.34}]}, 
 
      {"c":[{"v":"Argentina"},{"v":383.97}]}, 
 
      {"c":[{"v":"Belgium"},{"v":8189.33}]}, 
 
      {"c":[{"v":"Brazil"},{"v":2047.59}]}, 
 
      {"c":[{"v":"California"},{"v":14523.22}]}, 
 
      {"c":[{"v":"Guadalajara"},{"v":767.90}]}, 
 
      {"c":[{"v":"Hong Kong"},{"v":4351.54}]}, 
 
      {"c":[{"v":"Massachusetts"},{"v":3647.56}]}, 
 
      {"c":[{"v":"Ontario"},{"v":383.97}]}, 
 
      {"c":[{"v":"Oregon"},{"v":174896.81}]}, 
 
      {"c":[{"v":"Shanghai"},{"v":1279.90}]}, 
 
      {"c":[{"v":"South Korea"},{"v":383.19}]}, 
 
      {"c":[{"v":"Tennessee"},{"v":3327.52}]}, 
 
      {"c":[{"v":"Texas"},{"v":1535.64}]}, 
 
      {"c":[{"v":"Tokyo"},{"v":719.64}]}, 
 
      {"c":[{"v":"Virginia"},{"v":44882.59}]} 
 
     ] 
 
     }; 
 

 
     var ramdonutdata = new google.visualization.DataTable(jsonData); 
 

 
     var options = { 
 
     title: 'RAM Capacity by Location', 
 
     pieHole: 0.4, 
 
     sliceVisibilityThreshold: 0 
 
     }; 
 

 
     var chart = new google.visualization.PieChart(document.getElementById('globalramdonut')); 
 
     chart.draw(ramdonutdata,options); 
 
    }); 
 
    }, 
 
    packages: ['corechart'] // removed unused packages 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div id="globalramdonut" class="globalramdonut"></div>