Google Charts API pokazuje pusty ekran z $ (dokument) .ready method

Mam kilka funkcji, które tworzą różne wykresy za pomocą Google Charts API.

Kiedy dzwonię do nich bez metody jQuery za pomocą $(document).ready, wszystko działa poprawnie. Ale dzięki tej metodzie patrzę na pusty ekran.

Dlaczego?

<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 Oto błąd pojawia się w 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

Źródło

2011-03-04 Stann

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

jest chyba najbliżej odpowiedź, a odpowiedź Ryana Wheale na następujące postanowienia mogą być również pomocne.

Is it ok to use google.setOnLoadCallback multiple times?

Źródło

2011-03-04 18:45:27 digitaljoel

Podobno $ (dokument) .To się dzieje, zanim obiekt google jest dostępny i dlatego google.load zawodzi wewnątrz $ (document) .ready lub coś podobnego. No cóż. – Stann

Spróbuj zamknąć połączenia do ready?

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

Źródło

2011-03-04 18:09:29 Andomar

:) dzięki. to był tylko literówka. jest zamknięty w prawdziwym kodzie. – Stann

jakieś inne pomysły? – Stann

@Andre: Nie, ale czekam na inne odpowiedzi! Wygląda na to, że to digitaljoel go przybił. – Andomar

Zgodnie z dokumentacją wizualizacji google trzeba załadować pakiet (y) wizualny przed do onload lub jquery gotowy. Sugerowałbym ładowanie natychmiast po poleceniu skryptu jsapi, jak pokazano poniżej.

W przeciwnym razie otrzymasz 1) google nie jest zdefiniowany (błąd referencyjny) lub 2) jeśli używasz ajax prawdopodobnie pustą odpowiedź & pusta strona bez błędów.

sekwencja obciążenie: (używając Twój przykład)

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

Źródło

2011-09-19 19:49:05

Cześć, że rozwiązanie nie pracował dla mnie, widocznie (zgaduję, nie jestem pewien) google biblioteka ma pewne problemy, zakres kiedy to nazwać wewnątrz obiektu jQuery, więc rozwiązanie jest dość proste (chociaż dostał nie było tak proste: a) zdefiniować zmienną globalną i przypisać librari google:

var localGoogle = google;

wygląda zabawne huh .. :) następnie użyj zdefiniowanej zmiennej, aby zaimplementować se tOnCallback, pracował dla mnie Mam nadzieję, że to praca dla Ciebie ..

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

Źródło

2011-11-17 22:29:52 Ricardo

Dla alternatywnego rozwiązania można wykorzystać „” automatyczne ładowanie zawierać pakiety, które mają w tagu skryptu. To neguje potrzebę "google.setOnLoadCallback".

patrz szczegóły: https://developers.google.com/loader/#AutoLoading.

Można więc zrobić wszystko, jak zwykle, jako wydarzenie z dokumentem jquery.

Istnieje również kreator, który może skonfigurować adres URL, ale obecnie link jest uszkodzony. Oto i tak: http://code.google.com/apis/loader/autoloader-wizard.html

Źródło

2012-02-03 07:42:39 bigtallbill

Oto paradygmat, którego używam. Ustaw wywołanie zwrotne dla metody google.load i nie korzystaj w ogóle z google.setOnLoadCallback (AFAIK to nie jest potrzebne).

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

Źródło

2012-11-06 04:02:58 Paul

To rozwiązało mój problem z pustą stroną, dzięki! Zamiast wywoływać 'google.setOnLoadCallback (callback);' dodałem 'callback ': callback' do wywołania' google.load() '. Crazy, że to działa, ale tak. –

hav zadzwonić https://www.google.com/jsapi zamiast http://www.google.com/jsapi

powodzenia

Źródło

2014-01-02 17:44:56 gounane

Działa to dla mnie:

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

Źródło

2014-09-30 21:26:28 Tehila

  <!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>

Źródło

2014-10-10 15:23:08

Google Charts API pokazuje pusty ekran z $ (dokument) .ready method

Odpowiedz

Powiązane problemy