尝试让 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"}]}]}
感谢您的阅读。
最佳答案
首先,“RAM 容量 GB”
列的值必须是数字,而不是字符串。
(去掉引号)
{"c":[{"v":"阿姆斯特丹"},{"v":12286.34}]}
而不是...
{"c":[{"v":"阿姆斯特丹"},{"v":"12286.34"}]}
这应该使图表出现......
另外强烈建议不要在$.ajax
调用中使用async: false
相反,使用done
回调
建议设置类似于以下工作片段...
- 使用真实网址时将
fail
替换为done
- 您可以将 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>
关于javascript - Google Charts API - 饼图不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40003247/