在ajax调用后,我在使用google的图表api可视化数据时遇到了问题。
首先,我做了一个ajax调用并获取了一个json对象。之后,我想从 json 中提取一些数据并绘制仪表图。获取 json 并提取数据工作正常,但是当我尝试加载图表时,正文被删除,出现空白/白屏。有谁知道我做错了什么?我还尝试对图表的值进行硬编码,而不是获取 json 值(但在加载图表之前保留了 ajax 调用),但它也不起作用。
function loadStats(){
var http = getRequestObject();
var city = "berlin";
http.open("GET", "getTwitterSentiments.php?city="+city, true);
http.onreadystatechange=function() {
getStatistic(http)
};
http.send(null);
}
function getStatistic(request) {
if ((request.readyState == 4) && (request.status == 200)) {
var data = request.responseText;
var JSONStats = eval("(" + data + ")");
loadGauge(JSONStats.sentiment_index);
}
function loadGauge(sentiment){
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawGauge);
function drawGauge() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Test', sentiment]
]);
var options = {
width: 100,
height: 100,
redFrom: 0,
redTo: 45,
yellowFrom: 45,
yellowTo: 55,
greenFrom: 55,
greenTo: 100,
minorTicks: 10
};
var chart = new google.visualization.Gauge(document.getElementById('testgchart'));
chart.draw(data, options);
}
}
尝试使用google.load()
函数的回调功能。
例如,对于您的代码,请尝试以下操作:
function loadGauge(sentiment){
google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge});
}
function drawGauge(){
...
chart.draw(data, options);
}
有关更多信息,请查看Google Loader Developer Guide
的"动态加载"部分:https://developers.google.com/loader/#Dynamic
如果我理解正确,多次调用 loadGauge() 不会导致多次访问 Google 服务器来加载所需的 API,而只是一次。
我想你的元素testgchart
还没有在 DOM 中加载,你的代码应该可以工作。
我从您的代码中做了一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://www.google.com/jsapi"></script>
<script>
function loadGauge(val){
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawGauge);
function drawGauge() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Test', val],
]);
var options = {
width: 100,
height: 100,
redFrom: 0,
redTo: 45,
yellowFrom: 45,
yellowTo: 55,
greenFrom: 55,
greenTo: 100,
minorTicks: 10
};
var chart = new google.visualization.Gauge(document.getElementById('average'));
chart.draw(data, options);
}
}
</script>
</head>
<body>
<div id="average"></div>
<script>loadGauge(99)</script>
</body>
</html>
但是,如果您<script>loadGauge(99)</script>
删除此行并将正文标记替换为 <body onload="loadGauge(99)">
.你可能在做类似的事情。
如果您确定元素testgchart
存在,请在loadGauge
中输入日志,并告诉我它是否真的被getStatistic
调用。