17

Google ビジュアライゼーションを非同期で追加しようとしていますが、問題が発生しています。問題の原因となっている google.load に絞り込みました。js の google.load 部分が実行されると、空の screen/dom が表示されます。誰でも私が間違っていることを知っています。

google.setOnLoadCallback も使用してみましたが、同じ結果が得られました。

どんな助けでも素晴らしいでしょう

関連コード:

    $(document).ready(function () {
google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization });


                function drawVisualization() {
                   $.ajax({
                        type: "POST",
                        data: "{'monitorId':'" + monitor + "','monitorName':'" + name + "','context':'" + context + "'}",
                        dataType: "json",
                        url: "WebService.asmx/LoadMonitorToolGeo",
                        contentType: "application/json; charset=utf-8",
                        processData: true,
                        success: function (msg) {

                            var obj = jQuery.parseJSON(msg.d);


                            // $(msg.d).hide().appendTo("#sortable").fadeIn();
                            $("#" + obj.context).find(".toolContent").hide().html(obj.data).fadeIn();

                            DrawWorldMap(obj.map, obj.context);

                        },
                        error: function (req, status, error) {

                        },
                        complete: function (req, status) {


                        }
                    });



function DrawWorldMap(response, id) {
    var data = new google.visualization.DataTable();
    data.addRows(response.d.length);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    for (var i = 0; i < response.d.length; i++) {
        data.setValue(i, 0, response.d[i].Country);
        data.setValue(i, 1, response.d[i].Popularity);
    }
    var options = {};
    options['dataMode'] = 'regions';

    var container = document.getElementById(id);
    var geomap = new google.visualization.GeoMap(container);
    geomap.draw(data, options);
}

});
4

3 に答える 3

26

This article helped me:

How to dynamically load the Google Maps javascript API (On demand loading)

What made the difference here was to define the callback in the load method options attribute:

var options = {packages: ['corechart'], callback : myCallback};
google.load('visualization', '1', options);

I believe this way google.setOnLoadCallback(myCallback) won't be needed anymore and fortunately, it seems when callback is added the method won't cleanup the page.

于 2012-08-30T15:38:21.447 に答える
4

同じ問題がありました。私はクロムで動作しましたが、Firefox では動作しませんでした。

これを機能させるには、これを追加する必要がありました

setTimeout(function() {
    // Google Visualization stuff goes here
}, 0);

ここを参照してください https://nealpoole.com/blog/2010/07/jquery-getjson-firefox-and-google-visualization-madness/

また、試してみてください

google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization });

HTMLのヘッダーのスクリプトタグで、 $(document).ready 関数から削除します

于 2011-08-31T05:08:35.300 に答える
1

注: 以下はすべての JavaScript に適していますが、Greasemonkey で行われました。例として Google チャート API も使用していますが、このソリューションは他の Google API を超えており、タイマーによって設定された遅延なしでスクリプトの読み込みを待機する必要がある場所ならどこでも使用できます。

Greasemonkey を使用して Google チャートを追加する場合、コールバックで google.load を使用しても問題は解決しませんでした。プロセス (ページに挿入された Greasemonkey) で、www.google.com/jsapi スクリプト ノードが追加されます。Google の jsapi JavaScript にこの要素を追加した後、挿入された (またはページ) スクリプトは google.load コマンド (追加されたノードにロードする必要があります) を使用する準備ができていますが、この jsapi スクリプトはまだロードされていません。タイムアウトの設定は機能しましたが、タイムアウトは、注入された/ページ スクリプトとの Google jsapi スクリプト ロードのタイミング競合の単なる回避策でした。スクリプトが google.load (および場合によっては google.setOnLoadCallback) を実行する場所を移動すると、タイミングの競合状況に影響を与える可能性があります。以下は、google.load を呼び出す前に、google スクリプト要素がロードされるのを待つソリューションを提供します。次に例を示します。

// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup     
gscript.addEventListener("load",    
    function changeCB(params) {
        gscript.removeEventListener("load", changeCB);
        google.load("visualization", "1", {packages:["corechart"], "callback": 
            function drawChart() {
                var data;
                data = new google.visualization.arrayToDataTable(durationChart);

                var options = {
                    title:"Chart Title",
                    legend: {position:"none"},
                    backgroundColor:"white",
                    colors:["white","Blue"],
                    width: window.innerWidth || document.body.clientWidth,
                    height: window.innerHeight || document.body.clientHeight,
                    vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
                    hAxis: {title: "Days Since First Instance"},
                    height: ((cnt > 5)? cnt * 50 : 300),
                    isStacked: true
                }; // options


                // put chart into your div element
                var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
                chart.draw(data, options);
            } // drawChart function
        }); //packages within google.load & google load
    } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";
于 2014-02-09T23:58:36.243 に答える