Javascript 谷歌图表API-饼图不显示
试图让visualizations.PieChart正常工作,但它会绘制一个带有标题的空白白框,即使有数据。这是我的密码Javascript 谷歌图表API-饼图不显示,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,试图让visualizations.PieChart正常工作,但它会绘制一个带有标题的空白白框,即使有数据。这是我的密码 <div id="globalramdonut" class="globalramdonut"></div> google.charts.load('current', {'packages':['corechart','gauge','line','controls','geochart']}); google.charts.setOnLoadC
<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();
}
感谢阅读。首先,RAM容量GB列的值必须是数字,而不是字符串。
失言
{c:[{v:Amsterdam},{v:12286.34}]}
而不是
{c:[{v:Amsterdam},{v:12286.34}]}
这将使图表显示
另外,强烈建议不要在$.ajax调用中使用async:false
相反,使用done回调
建议设置类似于以下工作代码段的内容
使用真实url时,将fail替换为done
您可以将google回调放在load语句中
google.charts.load'current'{
回调函数{
var query=选择位置,从clusterstat中将RAM容量GB作为“RAM容量GB”,其中Date=根据位置ASC从clusterstat组中选择MAXDate;
//var urlencoded=encodeURIsql2json+query;
$.ajax{
url:'test',//urlencoded
数据类型:“json”
}.failfunction jsonData{/首先,RAM容量GB列的值必须是数字,而不是字符串。
失言
{c:[{v:Amsterdam},{v:12286.34}]}
而不是
{c:[{v:Amsterdam},{v:12286.34}]}
这将使图表显示
另外,强烈建议不要在$.ajax调用中使用async:false
相反,使用done回调
建议设置类似于以下工作代码段的内容
使用真实url时,将fail替换为done
您可以将google回调放在load语句中
google.charts.load'current'{
回调函数{
var query=选择位置,从clusterstat中将RAM容量GB作为“RAM容量GB”,其中Date=根据位置ASC从clusterstat组中选择MAXDate;
//var urlencoded=encodeURIsql2json+query;
$.ajax{
url:'test',//urlencoded
数据类型:“json”
}.failfunction 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"}]}]}