javascript - 在 Ajax 上加载 Google Chart -- 成功

Question

我正在通过 ajax 填充 Google 图表，但只有当 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>

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

有什么想法吗？

Answer 1

你的setOnLoadCallback是向后的。 setOnLoadCallback表示图表组件已准备就绪，因此可以通过2种方式解决:

1. google.setOnLoadCallback(function() {
   
         $.ajax({
           url: "getData.php",
           data: "test",
           success: function(resultData) {
             drawChart(resultData);
             return resultData;
           }
         });
       };

或者

两者都运行异步，如果setOnLoadCallback在Ajax结果之前返回，则什么也不做，您可以从ajax成功调用drawChart，如果ajax调用在setOnLoadCallback之前返回，则将结果存储在变量中，然后从setOnLoadCallback调用drawChart传递缓存结果