[英]Google Charts API - Pie Chart not displaying
Trying to get visualizations.PieChart working, but its drawing a blank white box with a title even though there is data. 试图获得可视化.PieChart工作,但它绘制了一个带有标题的空白框,即使有数据。 Here is my code. 这是我的代码。
<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();
}
Here is the data returned from my PHP script.... 这是我的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"}]}]}
Thanks for reading. 谢谢阅读。
first, the values for the "RAM Capacity GB"
column need to be numbers, not strings. 首先, "RAM Capacity GB"
列的值需要是数字,而不是字符串。
(lose the quotes) (丢失报价)
{"c":[{"v":"Amsterdam"},{"v":12286.34}]}
instead of... 代替...
{"c":[{"v":"Amsterdam"},{"v":"12286.34"}]}
that should make the chart appear... 应该使图表出现......
also, highly recommend not using async: false
on the $.ajax
call 另外,强烈建议不要在$.ajax
调用上使用async: false
instead, use the done
callback 相反,使用done
回调
suggest setting up similar to the following working snippet... 建议设置类似于以下工作片段...
fail
with done
when using real url 使用真实网址时用done
替换fail
load
statement 您可以将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.