为什么我的javascript ajax调用有它需要的数据，而谷歌图表没有

Question

这是一个宽泛的问题，所以我会尽量缩小范围。我有一个ajax调用方法来从服务器加载数据。该调用工作正常并获取数据。我已经核实了数据是否可用。这是在网页的标题中完成的。我在页面底部有另一个方法，它根据ajax调用中加载的数据绘制谷歌柱状图。问题是，即使在ajax调用中加载数据，googlecharts方法也不总是包含数据。以前有人见过这个问题吗？我甚至停顿了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:['rechart'，'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);
         }

任何帮助都将不胜感激。。。感谢

更新

新的src代码：

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.visionation.DataTable（）不是一个方法，在将其移动到调用的成功部分后，我觉得它正在失去src调用的可用库，但这没有意义

我在这里找到了这个链接，当时我试图看看是否有其他人有这个问题，我按照他对这个的建议进行了修改

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();         

但后来又犯了同样的错误。。。这导致图表没有加载。，我错过什么了吗

明白了！！！！！

在此处发现了类似的错误。显然，这场灾难的答案是

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();

Answer 1

@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);
  }
});

请注意，页面将加载，然后稍微加载之后，一旦成功接收到数据，就会绘制图形。

Answer 2

请记住，只有在加载jQuery之后才会执行Ajax调用。

一种解决方案是在Ajax函数的回调中运行图表代码，如下所示：

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;
            });
            drawAnnotations(); // Call the chart function here   
            console.log("GData 1: " + graphData);
        }
    });  
};

更好的是，我不会将图表信息作为全局变量公开，并将其作为参数传递给chartAnnotation函数。

Answer 3

在这里发现了类似的错误。显然，这场灾难的答案是google.setOnLoadCallback希望您给它一个函数而不是调用一个函数，因此对drawAnnotations（图形数据）需要包裹在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();