这是一个宽泛的问题，所以我会尽量缩小范围。我有一个 ajax 调用方法来从我的服务器加载数据。该调用工作正常并获取数据。我已验证数据可用。这是在网页的头部完成的。我在页面底部有另一种方法，它根据 ajax 调用中加载的数据绘制一个 google 柱形图。问题是 google charts 方法并不总是有数据，即使它是在 ajax 调用中加载的。有人见过这个问题吗？我什至暂停了 2 秒，以为谷歌图表只是首先加载，但事实证明并非如此。需要注意的是，如果我重新加载页面，我每次都会在图表中获取数据而不会失败。
Ajax 调用
var graphData = new Array();
var flag = false;
var ajaxCall = function(){
$.ajax({
type: "GET",
dataType: "json",
url: "service/getGraphicalData",
success: function(data)
{
var indexNum = 0;
$(data).each(function (index){
var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
graphData[indexNum] = newDataArr;
indexNum++;
flag = true;
});
console.log("GData 1: " + graphData);
}
});
};
ajaxCall(); <-- I make the call directly after the method declaration in the head of the page...
谷歌图表代码.... setTimeout(google.load('visualization', '1', {packages: ['corechart', 'bar']} google.setOnLoadCallback(drawAnnotations))},2000); <-- 在调用此方法时暂停两秒钟，看看它是否有帮助，但运气不好，这是在页面底部标记之前调用的
function drawAnnotations() {
console.log("GData 2: " + graphData);
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Day');
chartData.addColumn('number', 'Hits');
chartData.addColumn('number', 'Leads');
/* chartData.addRows([
["2015-03-17", 16, 14],
["2015-03-17", 12, 10],
["2015-03-17", 15, 13],
["2015-03-17", 17, 14],
["2015-03-17", 22, 21],
]); */
chartData.addRows(graphData);
var options = {
title: 'Traffic Incoming Versus Leads Gained',
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 14,
color: '#000',
auraColor: 'none'
}
},
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Total Leads And Hits'
},
series: { 0: {color: '#d3d3d3'}, 1: {color: '#FF6600'} }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
setTimeout(function(){chart.draw(chartData, options)},2000);
}
任何帮助将不胜感激......谢谢
更新
新源代码:
var ajaxCall = function(){
$.ajax({
type: "GET",
dataType: "json",
url: "/service/getGraphicalData",
success: function(data)
{
var indexNum = 0;
$(data).each(function (index){
var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
graphData[indexNum] = newDataArr;
indexNum++;
flag = true;
});
google.load('visualization', '1', {packages: ['corechart', 'bar']});
drawAnnotations ( graphData );
console.log("GData 1: " + graphData);
}
});
};
ajaxCall();
好吧，我已经更新了我的代码，看起来像这样，我仍然在调用 ajax 调用，但在将它移到调用的成功部分后，我一直收到 google.visualization.DataTable() is not a method，我觉得就像它正在丢失 src 调用的可用库，但这没有意义
我找到了这个链接 here当试图查看是否有其他人遇到此问题时，我按照他对此的建议进行了修改
var ajaxCall = function(){
google.load('visualization', '1', {packages: ['corechart', 'bar']});
$.ajax({
type: "GET",
dataType: "json",
url: "/service/getGraphicalData",
success: function(data)
{
var indexNum = 0;
$(data).each(function (index){
var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
graphData[indexNum] = newDataArr;
indexNum++;
flag = true;
});
google.setOnLoadCallback(drawAnnotations ( graphData ));
console.log("GData 1: " + graphData);
}
});
};
ajaxCall();
但随后又出现同样的错误...导致图表无法加载。我错过了什么吗，
明白了!!!!
发现类似错误here .显然，这场灾难的答案是
google.setOnLoadCallback
期望你给它一个函数而不是调用一个函数所以调用
drawAnnotations( graphData )
需要包裹在一个
function() { drawAnnotations ( graphData ) }
比如这个
google.setOnLoadCallBack(function() { drawAnnotations ( graphData ) });
所以新的方法应该是这样的:
function drawAnnotations(graphInfo) {
console.log("GData 2: " + graphData);
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Day');
chartData.addColumn('number', 'Hits');
chartData.addColumn('number', 'Leads');
chartData.addRows(graphInfo);
var options = {
title: 'Traffic Incoming Versus Leads Gained',
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 14,
color: '#000',
auraColor: 'none'
}
},
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Total Leads And Hits'
},
series: { 0: {color: '#d3d3d3'}, 1: {color: '#FF6600'} }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
setTimeout(function(){chart.draw(chartData, options)},2000);
}
var graphData = new Array();
var flag = false;
var ajaxCall = function(){
google.load('visualization', '1', {packages: ['corechart', 'bar']});
$.ajax({
type: "GET",
dataType: "json",
url: "/service/getGraphicalData",
success: function(data)
{
var indexNum = 0;
$(data).each(function (index){
var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
graphData[indexNum] = newDataArr;
indexNum++;
flag = true;
});
google.setOnLoadCallback(function(){drawAnnotations ( graphData );});
console.log("GData 1: " + graphData);
}
});
};
ajaxCall();
最佳答案
@Chandry 说的完全正确，我只是还不能投票。一开始关于 jQuery 最令人困惑的事情之一是异步的工作原理。
您不想执行 2000 毫秒的延迟，因为它会产生竞争条件，您的代码将 A - 变慢，而 B - 根据网络条件并不总是有效。
这是我的例子之一:
function setupDashboard()
{
//get data from openweathermap Api
$.getJSON('http://api.openweathermap.org/data/2.5/forecast?q=' +
city + ',us&appid=' + apiKey + '&units=' + units)
.fail ( () => {
//TODO: implement failure logic
})
.success( (res, sts) => {
console.log(sts);
//call my methods to draw dashboard components
drawWeatherIcon(res.list[0].weather[0].main);
drawLineGraph();
drawPieChart(res.list[0].clouds.all);
}
});
请注意，页面会加载，然后稍后，一旦成功接收到数据，就会绘制图形。
关于javascript - 为什么我的 javascript ajax 调用有它需要的数据但谷歌图表没有，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34700673/