谷歌圖表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>