Google Charts API - 餅圖未顯示

Question

試圖獲得可視化.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"}]}

應該使圖表出現......

另外，強烈建議不要在$.ajax調用上使用async: false

相反，使用done回調

建議設置類似於以下工作片段...

• 使用真實網址時用done替換fail
• 您可以將google回調放在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>