在Ajax上加载Google Chart

在Ajax上加载Google Chart - 成功(Loading Google Chart on Ajax — success)

我正在从ajax中填充Google Chart，但只有当ajax的负载足够快时它才有用。

同样，我需要将我的数据保存为变量，以便稍后在重新调整大小函数和其他数据管理时使用。

我目前正在使用Google图表的教程。

我刚刚添加了一些consoles.log来查看它失败的地方。

<script type="text/javascript"> // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. //google.charts.setOnLoadCallback(drawChart); //Mod function drawChart(dataIN) { console.log(dataIN); if(dataIN == undefined){ console.log("opt 1") console.log(dataIN); var jsonData = $.ajax({ url: "getData.php", dataType: "text", async: false }).responseText; }else{ console.log("opt 2"); console.log(dataIN); } // Create our data table out of JSON data loaded from server. console.log("data in process") var data = new google.visualization.DataTable(dataIN); // Instantiate and draw our chart, passing in some options. console.log("drawCart") var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); } var GAdata = $.ajax({ url: "getData.php", data: "test", async: false, success: function(resultData){ google.setOnLoadCallback(drawChart(resultData)); return resultData; } }).responseText; </script>

最后一个控制台日志是“正在处理的数据”。

有任何想法吗？

I'm populating Google Chart from an ajax, but it's works only when the ajax's load is fast enough.

And too, i need to keep my data as variable to be used later on re-sizes function and other data managment.

I'm working with the Google chart's tutorial at the moment.

I just added some consoles.log to see where it's fails.

<script type="text/javascript"> // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. //google.charts.setOnLoadCallback(drawChart); //Mod function drawChart(dataIN) { console.log(dataIN); if(dataIN == undefined){ console.log("opt 1") console.log(dataIN); var jsonData = $.ajax({ url: "getData.php", dataType: "text", async: false }).responseText; }else{ console.log("opt 2"); console.log(dataIN); } // Create our data table out of JSON data loaded from server. console.log("data in process") var data = new google.visualization.DataTable(dataIN); // Instantiate and draw our chart, passing in some options. console.log("drawCart") var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); } var GAdata = $.ajax({ url: "getData.php", data: "test", async: false, success: function(resultData){ google.setOnLoadCallback(drawChart(resultData)); return resultData; } }).responseText; </script>

the last console log is "data in process".

Any ideas?

最满意答案

你的setOnLoadCallback是倒退的。 setOnLoadCallback表示图表组件已准备就绪，因此您可以通过两种方式解决它：

google.setOnLoadCallback(function() {

      $.ajax({
        url: "getData.php",
        data: "test",
        success: function(resultData) {
          drawChart(resultData);
          return resultData;
        }
      });
    }; 
    
  
 
 
 要么 
 
 
  两者都运行异步，如果setOnLoadCallback在你的Ajax结果之前返回，你什么都不做，你从ajax成功调用drawChart，如果ajax调用在setOnLoadCallback之前返回，那么你将结果存储在一个变量中然后从setOnLoadCallback调用drawChart传递缓存结果  
Your setOnLoadCallback is backwards. setOnLoadCallback means that the chart component is ready, so you can solve it in 2 ways:
 
 
 
 
   
    
    
google.setOnLoadCallback(function() {

      $.ajax({
        url: "getData.php",
        data: "test",
        success: function(resultData) {
          drawChart(resultData);
          return resultData;
        }
      });
    }; 
    
   
 
 
Or
 
 
 Have both run async, and if setOnLoadCallback returns before your Ajax result, you do nothing, you make drawChart call from your ajax success, if the ajax call returns before setOnLoadCallback then you store the result in a variable then call drawChart from setOnLoadCallback passing the cached result