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

Question

这是一个宽泛的问题，所以我会尽量缩小范围。我有一个 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();

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

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