谷歌在 ajax 调用后绘制 api
Google charts api after ajax call
在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
调用。
相关文章:
- 谷歌地图API在Javascript中,绘制圆的半径
- 如何使用谷歌地图绘制已知路线 JavsScript API V3.
- Google Maps v3 API-在地图上绘制圆圈
- 如何在谷歌地图API中使用坐标数组绘制多边形
- Javascript图表没有绘制在不同的android api版本上
- 谷歌在 ajax 调用后绘制 api
- 谷歌地图API - 如何只绘制第一个和最后一个标记
- 使用谷歌方向 API 问题绘制超过 8 个航点的路线图
- 如何使用Google-Maps-API-3绘制多个多边形
- 谷歌地图API - 在数组中使用Lat Lng坐标绘制折线飞行路径
- 谷歌地图API绘制预定义的路线不起作用
- 谷歌地图api有可能绘制国际方向吗
- 在GMAPS API V3上绘制标记,并将位置发送到Google Fusion
- 谷歌绘制你的时间线api
- 谷歌地图Javascript API发布绘制多个圆
- 谷歌图表API-检查成功绘制
- 使用谷歌地图api根据数据中的值绘制不同颜色的圆圈
- 在谷歌地图v3 API上绘制区域多边形
- 谷歌图表API-在绘制时,给定轴上的所有系列都必须是相同的数据类型
- 使用Google Apps Script绘制API