24

有一个问题我无法解决，我在互联网上找了很多，但一无所获。

我有这个 JavaScript 用于通过 PHP 执行 Ajax 请求。请求完成后，它会调用一个函数，该函数使用 Google 可视化 API 绘制一个带注释的时间线来呈现数据。

该脚本在没有 AJAX 的情况下运行良好，如果我内联执行所有操作，它运行良好，但是当我尝试使用 AJAX 时，它不起作用！！！

我得到的错误是在“数据”数据表的声明中，在 Google Chrome 开发人员工具中我得到了一个Uncaught TypeError: Cannot read property 'DataTable' of undefined.

当脚本出现错误时，页面上的所有内容都被清除，它只显示一个空白页面。

所以我不知道如何使它工作。

$(document).ready(function(){               
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data      
            google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
            google.setOnLoadCallback(drawData(html));                                                   
        }
    });     
});


function drawData(response){            
    $("#divTendency").removeClass("loading");

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted>
    // So it has to be split first by * then by ,
    var dataArray   = response.split("*");
    var dataTickets = dataArray[0];
    var dataDates   = dataArray[1];
    var dataCount   = dataArray[2];

    // The comma separation now splits the ticket counts and the dates
    var dataTicketArray = dataTickets.split(",");
    var dataDatesArray  = dataDates.split(",");

    // Visualization data                               
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Tickets');
    data.addRows(dataCount);                                                    

    var dateSplit = new Array();
    for(var i = 0 ; i < dataCount ; i++){
        // Separating the data because must be entered as "new Date(YYYY,M,D)"
        dateSplit = dataDatesArray[i].split("-");
        data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0]));
        data.setValue(i, 1, parseInt(dataTicketArray[i]));
    }               

     var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
     annotatedtimeline.draw(data, {displayAnnotations: true});                              
}
4

10 回答 10

25

我记得当我使用 Google API 时，它明确表示要先初始化负载。所以也许将 google.load 函数排除在 AJAX 之外，然后在成功时继续调用函数的第二部分：

//Straight Away!
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data
            google.setOnLoadCallback(drawData(html)); 
        }
    });  
});
于 2010-03-09T20:56:00.987 回答
6

我知道这是一篇较旧的帖子，但是在浏览了 google.load 文档之后，我发现了一个异步选项，以防您想要动态加载库：

http://code.google.com/apis/loader/

function loadMaps() {
   google.load("visualization", "2", {"callback" : function(){ alert(4); }});
}
于 2011-08-16T15:00:29.713 回答
2

我知道这是一个旧线程，但这可能对其他人有所帮助。
我现在遇到了同样的问题，它与我之前使用 CMS 时非常相似（如果不一样的话）：

页面代码：

<div id='targetdiv'></div>
<script type="text/javascript">
$(document).ready( function () {
   $('#targetdiv').load('...some url...');
});
</script>

用ajax加载的脚本的一部分：

<script type="text/javascript">
  document.write("hello");
</script>

结果是一个带有文本“hello”的页面，看起来它仍在加载中。这是由 document.write 方法引起的。由于脚本被加载到一个已经完成并关闭的文档中，浏览器会打开一个新文档，我想 javascript 引擎正在等待下一行代码，因为打开一个新文档删除了正在执行的文档，所以该代码永远不会到达。

于 2011-02-17T09:43:11.407 回答
1

这是在黑暗中拍摄的一点：

google.setOnLoadCallback(function() { drawData(html) });

可能是对html的引用丢失了，需要闭包。

于 2010-03-06T15:33:01.100 回答
1

您能否提供返回数据的样本？您可以直接调用 drawData(html) ：

$.ajax({
type: "POST",
async: false,
url: "getTIER1Tickets.php",
data: "",
success: function(html){
    // Succesful, load visualization API and send data      
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
   //You are already in a callback function, better like this ? 
    drawData(html);                                                   
}});
于 2010-03-07T13:17:34.100 回答
0

您是否尝试过将其作为同步 AJAX 请求执行？注意下面的异步设置。

$.ajax({
    type: "POST",
    async: false,
    url: "getTIER1Tickets.php",
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});
于 2010-02-23T01:38:37.820 回答
0

我对google apis一点也不熟悉，但我猜回调中的'html'实际上是json或脚本，你可以试试$ .ajax'dataType'选项：

$.ajax({
    type: "POST",
    url: "getTIER1Tickets.php",
    dataType: "json",//"script"
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});

更多信息：http ://api.jquery.com/jQuery.ajax/

于 2010-02-24T05:27:40.923 回答
0

看起来您缺少提供可视化的 Google 库。你确定你已经包含了所有需要的谷歌脚本吗？

于 2010-02-26T16:05:33.833 回答
0

我在我的一个项目中使用了基于 AJAX 的选项卡系统和 Google 的交互式折线图可视化，并遇到了类似的砖墙。

由于 AJAX 对跨域脚本的固有阻止，您无法加载 Google javascript API ( http://www.google.com/jsapi ) 或任何其他外部资源。

而且由于 Google 的服务条款禁止离线（也称为“不在 Google 上托管”）使用他们的可视化 API，因此您无法合法地获取脚本的副本并根据需要自行托管它们。

我尝试了一个 hacky 解决方法，在我的选项卡中包含一个名为“get_vis.php”而不是“visualization_page.php”的文件；“get_vis.php”的内容是：

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php');
?>

但是，运气不好，似乎让 API 正确加载的唯一方法是调整安全设置，以允许与 Google 的服务器交互。我不知道它是否有帮助，但祝你好运。

于 2010-07-11T01:31:48.020 回答
0

这对我有用

google.load("visualization", "1", { packages: ["corechart"] });

             var chart ;
             var data ;
             var options;
        function Change(s)
        {
              // s in json format    
              google.setOnLoadCallback(reDraw(s));
              function reDraw(s) {
                  console.log(new Function("return " + s)().length); // to test if json is right
                  data = google.visualization.arrayToDataTable(new Function("return "+s)());

                    options = {
                    title: 'Product Scanes',
                    vAxis: { title: '', titleTextStyle: { color: 'red'} }         
                };

              }         
                chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
        }  
        function requestDate() // cal the method when you want to draw the chart 
        {

            $.ajax({
                type: "POST", // CHANGED
               // contentType: "application/json; charset=utf-8",
                url: "something.php",
                data: {  parameters you wanna pass },
                success: function (d) { 
                Change(d);


                }
            });    
        }
}
于 2012-09-19T13:27:42.260 回答