Google Charts API和jQuery

Question

我開始使用Google Charts API，並且看到一些關於其行爲的好奇方面。我首先注意到，當我將谷歌圖表代碼放入jQuery的document.ready內時，我的示例圖表不會加載。於是我發揮各地，並做了以下內容：

google.load('visualization', '1.0', { 'packages': ['corechart'] }); 

     //jquery part 
      $(document).ready(function() { 
       google.setOnLoadCallback(drawStuff); 
       function drawStuff() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Topping'); 
        data.addColumn('number', 'Slices'); 
        data.addRows([ 
        ['Mushrooms', 3], 
        ['Onion', 1], 
        ['Olives', 1], 
        ['Zucchini', 3], 
        ['Pepperoni', 2] 
       ]); 
        //set the chart options 
        var options = { 
         title: 'Pizza Consumed', 
         width: 400, 
         height: 500 
        }; 
        //instantiate and draw our chart, passing in the options 
        var chart = new google.visualization.ColumnChart(document.querySelector('#chart')); 
        chart.draw(data, options); 
        $('#chart').fadeIn(); 
       }; 
      }); 

這個工程，我希望的那樣，但是當我打開了開發工具我看到，google.com/jsapi GET請求顯然沒有（用紅色表示X在Chrome開發工具中）。但是，圖表肯定會出現在頁面上，並按我預期的那樣工作。爲什麼這個當前的迭代工作，而將所有內容都放在document.ready中？如果我想在一個項目中使用Google圖表和jQuery，這是否可行？

Answer 1

沒有必要把圖表代碼文檔準備調用內部 - 其實，你更有可能遇到這樣做，比你，如果你只是把它留在了自己的問題：

function drawStuff() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onion', 1], 
     ['Olives', 1], 
     ['Zucchini', 3], 
     ['Pepperoni', 2] 
    ]); 
    //set the chart options 
    var options = { 
     title: 'Pizza Consumed', 
     width: 400, 
     height: 500 
    }; 
    //instantiate and draw our chart, passing in the options 
    var chart = new google.visualization.ColumnChart(document.querySelector('#chart')); 
    chart.draw(data, options); 
} 
google.load('visualization', '1.0', { 'packages': ['corechart'], callback: drawStuff }); 

$(document).ready(function() { 
    // do stuff on "ready" event 
}); 

另一方面，我看到你在繪製圖表後調用$('#chart').fadeIn();。我認爲這意味着chart在繪製之前被隱藏，這可能會在某些瀏覽器中導致問題。建議的操作過程是在繪製之前取消隱藏div，並在繪製後立即再次隱藏（從「準備就緒」的事件處理程序中）。您可以調用fadeIn效果：

$('#chart').show(); 
var chart = new google.visualization.ColumnChart(document.querySelector('#chart')); 
google.visualization.events.addListener(chart, 'ready', function() { 
    $('#chart').hide(); 
    $('#chart').fadeIn(); 
}); 
chart.draw(data, options);