谷歌图表API显示空白屏幕$（document）.ready方法

Question

我有几个函数，使用谷歌图表API实例化各种图表。

当我打电话给他们没有jQuery的$(document).ready方法，一切工作正常。但用这种方法，我正在看空白屏幕。

为什么？

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script> 
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script> 
function drawColumnChart1(){..some code..} 
function drawColumnChart2(){..some code..} 
function drawGeoChart(){.some code..} 

//This works fine. 
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]}); 
google.setOnLoadCallback(window.drawColumnChart1); 
google.setOnLoadCallback(window.drawColumnChart2); 
google.setOnLoadCallback(window.drawGeoChart); 



//This doesn't work 
$(document).ready(function(){ 
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]}); 
    google.setOnLoadCallback(window.drawColumnChart1); 
    google.setOnLoadCallback(window.drawColumnChart2); 
    google.setOnLoadCallback(window.drawGeoChart); 
}); 

UPDATE 以下是错误我在Firebug得到：

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20" data: no] 
http://www.google.com/jsapi 
Line 22 

Answer 1

google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

可能是最接近的答案，瑞安Wheale对以下问题的答案也可能会有所帮助。

Is it ok to use google.setOnLoadCallback multiple times?

Answer 2

试图关闭呼叫ready？

$(document).ready(function(){ 
    ... 
}); 
^^^ 

Answer 3

按照谷歌的可视化文档需要加载视觉包（多个）之前到为onload或jquery的准备。我建议在jsapi脚本引用之后立即加载，如下所示。

否则你会得到一个1）谷歌没有定义（参考错误）或2）如果使用ajax可能是一个空白的回应&空白页没有错误。

装载顺序：（使用你的例子）

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script> 
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]}); 
</script> 

$(document).ready(function(){ 
    google.setOnLoadCallback(window.drawColumnChart1); 
    google.setOnLoadCallback(window.drawColumnChart2); 
    google.setOnLoadCallback(window.drawGeoChart); 
}); 

Answer 4

喜的是解决方案不工作对我来说，显然是（我猜我不知道）谷歌图书馆有一定范围的问题时，你怎么称呼它一个jQuery对象中，因此该解决方案是非常简单（虽然有它不是那么简单：S）定义一个全局变量并指定谷歌librari：

var localGoogle = google; 

看起来很滑稽呵呵:) ..然后使用你定义的变量来调用se tOnCallback，它为我工作，我希望它为你工作..

$(document).ready(function(){ 
    localGoogle.setOnLoadCallback(window.drawColumnChart1); 
} 

Answer 5

对于一个替代的解决方案，你可以使用“自动加载”，包括在脚本标签所需的软件包。这否定了对“google.setOnLoadCallback”的需求。详细请参照https://developers.google.com/loader/#AutoLoading。

因此，您可以像jquery文档准备好的事件一样完成所有工作。

还有一个向导，可以为您设置一个URL，但目前链接已损坏。这里是无论如何：http://code.google.com/apis/loader/autoloader-wizard.html

Answer 6

这是我使用的范例。为google.load方法设置回调，并且根本不使用google.setOnLoadCallback（AFAIK不需要）。

MyChart.prototype.render = function() { 
    var self = this; 
    google.load("visualization", 
       "1", 
       { callback: function() { self.visualize(); }, 
        packages: ["corechart"] } 
       ); 
} 

MyChart.prototype.visualize = function() { 

    var data = google.visualization.arrayToDataTable(
    [ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById("mychart_div"));  
    chart.draw(data, options); 
} 

Answer 7

你甲肝叫 https://www.google.com/jsapi 而不是 http://www.google.com/jsapi

好运

Answer 8

这个工作对我来说：

google.load("visualization", "1", {packages:["corechart"], 
     callback:function(){drawChart();}}); 
     //google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     console.log("enter draw"); 
       var data = google.visualization.arrayToDataTable([ 
    ['Year', 'value', { role: 'style' } ], 
    ['2010', 10, ' color: gray'], 
    ['2010', 200, 'color: #76A7FA'], 
    ['2020', 16, 'opacity: 0.2'], 
    ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], 
    ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; 
    fill-color: #BC5679; fill-opacity: 0.2'] 
    ]); 
       var view = new google.visualization.DataView(data); 

       var options = { 
       title: 'Company Performance', 
       tooltip: {isHtml: false}, 
       legend: 'none', 
       }; 

       var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 

       chart.draw(view, options); 

     } 

演示：jsfiddle

Answer 9

  <!DOCTYPE html> 
      <html> 
      <head> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
      <script type="text/javascript"> 

      google.load("visualization", "1", {packages:["corechart"]}); 
      function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) { 

       $.ajax({ 
         url: "http://localhost/reporte/response.php", 
           type: "GET", 
           dataType: "JSON", 
           cache: false, 
           async: false, 
           data: {start:gstart,end:gend,id:gid}, 
           success: function(data) { 
            var len = 0; 
            if (data.length) 
            { 
            len = data.length; 
            } 

            if(len > 0) 
            { 
            dataarray = [[gtitle,glabel]]; 
             for (var i = 0; i< len; i++) { 
              dataarray.push([data[i].label,data[i].value]); 
             } 
            } 
            else if(len==0) 
            { 

            } 
           }, 
           error:function(data) 
           { 


           } 
         }); 

        var values = new google.visualization.arrayToDataTable(dataarray); 
        var options = {title: gtitle,width:gwidth,height:gheight}; 

          switch(gtype){ 
           case 'PieChart': 
            var chart = new google.visualization.PieChart(document.getElementById('chart')); 
            break; 
           case 'LineChart': 
            var chart = new google.visualization.LineChart(document.getElementById('chart')); 
            break; 
           case 'ColumnChart': 
            var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
            break; 
           case 'AreaChart': 
            var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
            break; 
          } 

        chart.draw(values, options); 


      } 






      $(document).ready(function(){ 
      //drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1'); 
      //drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2'); 
      //drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3'); 
      drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4'); 
      }); 

      </script> 
      </head> 
      <body> 

      <div id="chart"></div> 

      </body> 
      </html>