28

Google Charts 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
4

9 に答える 9

21

google.setOnLoadCallback と jQuery $(document).ready() を組み合わせて使用​​しても問題ありませんか?

がおそらく最も近い回答であり、次の Ryan Wheal の回答も役立つ場合があります。

google.setOnLoadCallback を複数回使用しても問題ありませんか?

于 2011-03-04T18:45:27.770 に答える
14

Google ビジュアライゼーションのドキュメントによると、 onload または jquery の準備が整う前に、ビジュアル パッケージをロードする必要があります。以下に示すように、jsapi スクリプト参照の直後にロードすることをお勧めします。

そうしないと、1) Google が定義されていません (参照エラー)、または 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);
});
于 2011-09-19T19:49:05.533 に答える
5

これが私が使用しているパラダイムです。google.load メソッドのコールバックを設定し、google.setOnLoadCallback をまったく使用しないでください (私の知る限り、これは必要ありません)。

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);
}
于 2012-11-06T04:02:58.107 に答える
1

こんにちは、その解決策は私にとってはうまくいきませんでした。明らかに（私は確信が持てないと思います）Googleライブラリには、jqueryオブジェクト内で呼び出すときにいくつかのスコープの問題があるため、解決策は非常に単純です（そうではありませんでしたが）とても簡単です:s)グローバル変数を定義し、Googleライブラリを割り当てます:

var localGoogle = google;

変に見えます:)...次に、定義した変数を使用してsetOnCallbackを呼び出します。私にとってはうまくいきました。うまくいくことを願っています..

$(document).ready(function(){
    localGoogle.setOnLoadCallback(window.drawColumnChart1);
}
于 2011-11-17T22:29:52.290 に答える
0

これは私のために働く：

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

于 2014-09-30T21:26:28.353 に答える
0

http://www.google.com/jsapi の代わりに https://www.google.com/jsapiを呼び出す必要 があります

幸運を

于 2014-01-02T17:44:56.527 に答える
0

別の解決策として、'autoloading' を使用して、スクリプト タグに必要なパッケージを含めることができます。これにより、「google.setOnLoadCallback」が不要になります。

詳細については、 https://developers.google.com/loader/#AutoLoadingを参照してください。

したがって、jquery ドキュメントの準備完了イベントとして通常どおりにすべてを実行できます。

URL を設定できるウィザードもありますが、現在リンクが壊れています。とにかくここにあります：http://code.google.com/apis/loader/autoloader-wizard.html

于 2012-02-03T07:42:39.963 に答える
-1

への通話を終了してみてくださいready。

$(document).ready(function(){
    ...
});
^^^
于 2011-03-04T18:09:29.837 に答える