API Google Charts hiển thị màn hình trống với phương thức $ (tài liệu) .ready

Question

Tôi có một số chức năng tạo biểu đồ khác nhau bằng API Google Charts.

Khi tôi gọi cho họ mà không cần phương thức $(document).ready của jQuery, mọi thứ đều hoạt động tốt. Nhưng với phương pháp đó, tôi đang nhìn vào màn hình trống.

Tại sao?

<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); 
}); 

CẬP NHẬT Đây là lỗi tôi nhận được trong 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?

có lẽ là câu trả lời gần nhất, và câu trả lời Ryan Wheale về sau cũng có thể hữu ích.

Is it ok to use google.setOnLoadCallback multiple times?

Answer 2

Cố gắng đóng cuộc gọi đến ready?

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

Answer 3

Theo các tài liệu trực quan google bạn cần phải tải các gói hình ảnh (s) trước để onload hoặc jquery sẵn sàng. Tôi sẽ đề nghị tải ngay lập tức sau khi tham chiếu tập lệnh jsapi như hình dưới đây.

Nếu không, bạn sẽ nhận được 1) google không được xác định (lỗi tham chiếu) hoặc 2) nếu sử dụng ajax có thể là một phản hồi trống & trang trống không có lỗi.

chuỗi tải: (sử dụng ví dụ của bạn)

<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

Hi giải pháp mà không làm việc cho tôi, rõ ràng (tôi đoán tôi không chắc chắn) google thư viện có một số vấn đề phạm vi khi bạn gọi nó bên trong một đối tượng jquery, vì vậy giải pháp khá đơn giản (mặc dù đã nhận nó không phải là đơn giản như vậy: s) định nghĩa một biến toàn cầu và phân công các librari google:

var localGoogle = google; 

có vẻ buồn cười huh :) .. sau đó sử dụng biến bạn đã xác định để lập hoá đơn tOnCallback, nó làm việc cho tôi tôi hy vọng nó làm việc cho bạn ..

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

Answer 5

Đối với một giải pháp thay thế, bạn có thể sử dụng 'tự động load' để bao gồm các gói mà bạn muốn trong thẻ script. Điều này phủ nhận sự cần thiết của "google.setOnLoadCallback".

xem https://developers.google.com/loader/#AutoLoading để biết chi tiết.

Vì vậy, bạn có thể làm mọi thứ như bình thường từ sự kiện sẵn sàng tài liệu jquery.

Ngoài ra còn có trình hướng dẫn có thể thiết lập URL cho bạn nhưng hiện tại liên kết bị hỏng. Ở đây nó là anyway: http://code.google.com/apis/loader/autoloader-wizard.html

Answer 6

Đây là mô hình tôi đang sử dụng. Đặt gọi lại cho phương thức google.load và không sử dụng google.setOnLoadCallback ở tất cả (AFAIK điều này là không cần thiết).

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

bạn hav gọi https://www.google.com/jsapi thay vì http://www.google.com/jsapi

may mắn

Answer 8

này làm việc cho tôi:

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); 

     } 

Demo: 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>