jquery - jQueryはAJAXを使用してGoogleVisualizationAPIをロードします

Question

解決できない問題があります。インターネットでよく調べていますが、何も見つかりませんでした。

PHPによるAjaxリクエストを実行するために使用されるこのJavaScriptがあります。リクエストが完了すると、Google Visualization APIを使用して注釈付きのタイムラインを描画し、データを表示する関数を呼び出します。

スクリプトはAJAXがなくてもうまく機能します。すべてをインラインで実行するとうまく機能しますが、AJAXで実行しようとすると機能しません!!!

私が得るエラーは、「データ」DataTableの宣言にあります。GoogleChromeデベロッパーツールでは、を取得しUncaught TypeError: Cannot read property 'DataTable' of undefinedます。

スクリプトでエラーが発生すると、ページ上のすべてがクリアされ、空白のページが表示されます。

だから私はそれを機能させる方法がわかりません。

$(document).ready(function(){               
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data      
            google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
            google.setOnLoadCallback(drawData(html));                                                   
        }
    });     
});


function drawData(response){            
    $("#divTendency").removeClass("loading");

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted>
    // So it has to be split first by * then by ,
    var dataArray   = response.split("*");
    var dataTickets = dataArray[0];
    var dataDates   = dataArray[1];
    var dataCount   = dataArray[2];

    // The comma separation now splits the ticket counts and the dates
    var dataTicketArray = dataTickets.split(",");
    var dataDatesArray  = dataDates.split(",");

    // Visualization data                               
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Tickets');
    data.addRows(dataCount);                                                    

    var dateSplit = new Array();
    for(var i = 0 ; i < dataCount ; i++){
        // Separating the data because must be entered as "new Date(YYYY,M,D)"
        dateSplit = dataDatesArray[i].split("-");
        data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0]));
        data.setValue(i, 1, parseInt(dataTicketArray[i]));
    }               

     var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
     annotatedtimeline.draw(data, {displayAnnotations: true});                              
}

score 25 · Accepted Answer

Google API を使用したときに、負荷を最初に初期化するように明示的に指示したことを覚えています。したがって、おそらく google.load 関数を AJAX から除外し、成功時に関数の 2 番目の部分を呼び出し続けます。

//Straight Away!
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data
            google.setOnLoadCallback(drawData(html)); 
        }
    });  
});

score 6 · Accepted Answer

これが古い投稿であることは知っていますが、google.load ドキュメントを掘り下げた後、ライブラリを動的にロードする場合に備えて async オプションを見つけました。

http://code.google.com/apis/loader/

function loadMaps() {
   google.load("visualization", "2", {"callback" : function(){ alert(4); }});
}

score 2 · Accepted Answer

私はこれが古いスレッドであることを知っていますが、これは他の人を助けるかもしれません。
私は今同じ問題に遭遇しました、そしてそれは私が以前にCMSで持っていたものと非常に似ています（同じではないにしても）：

ページのコード：

<div id='targetdiv'></div>
<script type="text/javascript">
$(document).ready( function () {
   $('#targetdiv').load('...some url...');
});
</script>

ajaxでロードされたスクリプトの一部：

<script type="text/javascript">
  document.write("hello");
</script>

結果は、まだロードされているように見える「hello」というテキストのページです。これは、document.writeメソッドが原因で発生します。スクリプトはすでに完成して閉じたドキュメントに読み込まれるため、ブラウザは新しいドキュメントを開きます。新しいドキュメントを開くと実行中のドキュメントが削除されたため、javascriptエンジンは次のコード行を待機していると思います。

score 1 · Accepted Answer

返されたデータのサンプルを提供していただけますか? drawData(html) を直接呼び出すことができます:

$.ajax({
type: "POST",
async: false,
url: "getTIER1Tickets.php",
data: "",
success: function(html){
    // Succesful, load visualization API and send data      
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
   //You are already in a callback function, better like this ? 
    drawData(html);                                                   
}});

score 1 · Accepted Answer

これは暗闇でのちょっとしたショットです。

google.setOnLoadCallback(function() { drawData(html) });

html への参照が失われている可能性があり、クロージャが必要です。

score 0 · Accepted Answer

これを同期AJAXリクエストとして実行してみましたか？以下の非同期設定に注意してください。

$.ajax({
    type: "POST",
    async: false,
    url: "getTIER1Tickets.php",
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});

score 0 · Accepted Answer

視覚化を提供する Google ライブラリが見つからないようです。必要なすべての Google スクリプトが含まれていますか?

score 0 · Accepted Answer

これは私のために働く

google.load("visualization", "1", { packages: ["corechart"] });

             var chart ;
             var data ;
             var options;
        function Change(s)
        {
              // s in json format    
              google.setOnLoadCallback(reDraw(s));
              function reDraw(s) {
                  console.log(new Function("return " + s)().length); // to test if json is right
                  data = google.visualization.arrayToDataTable(new Function("return "+s)());

                    options = {
                    title: 'Product Scanes',
                    vAxis: { title: '', titleTextStyle: { color: 'red'} }         
                };

              }         
                chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
        }  
        function requestDate() // cal the method when you want to draw the chart 
        {

            $.ajax({
                type: "POST", // CHANGED
               // contentType: "application/json; charset=utf-8",
                url: "something.php",
                data: {  parameters you wanna pass },
                success: function (d) { 
                Change(d);


                }
            });    
        }
}

score 0 · Accepted Answer

私のプロジェクトの 1 つで AJAX ベースのタブシステムと Google の Interactive Line Chart Visualizations を使用していますが、同様のレンガの壁にぶつかりました。

AJAX 固有のクロスドメインスクリプティングのブロックにより、Google JavaScript API ( http://www.google.com/jsapi ) やその他の外部リソースを読み込むことができません。

また、Google の利用規約では、視覚化 API のオフライン (別名「Google でホストされていない」) での使用が禁止されているため、法的にスクリプトのコピーを取得して、必要に応じて自分でホストすることはできません。

タブに「visualization_page.php」の代わりに「get_vis.php」というファイルを含めるハックな回避策を試しました。「get_vis.php」の内容は次のとおりです。

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php');
?>

しかし、うまくいきません。API を適切にロードする唯一の方法は、セキュリティ設定を調整して Google のサーバーとやり取りできるようにすることです。参考になるかわかりませんが、頑張ってください。

score 0 · Accepted Answer

私はGoogle APIにまったく慣れていませんが、コールバックの「html」は実際にはjsonまたはスクリプトであると思います.$.ajaxの「dataType」オプションを試すことができます：

$.ajax({
    type: "POST",
    url: "getTIER1Tickets.php",
    dataType: "json",//"script"
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});

詳細: http://api.jquery.com/jQuery.ajax/

jquery - jQueryはAJAXを使用してGoogleVisualizationAPIをロードします

10 に答える 10

Related

Reference