0

Google Charts API を使い始めたところ、その動作についていくつかの興味深い側面が見られます。最初に、jQuery の document.ready 内に Google チャート コードを配置すると、サンプル チャートが読み込まれないことに気付きました。それで、私は遊んで、次のことをしました：

  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 リクエストが明らかに失敗したことがわかります (Chrome 開発ツールでは赤い X で示されます)。ただし、グラフは確かにページに表示され、期待どおりに機能します。document.ready の内部にすべてを配置すると機能しないのに、この現在の繰り返しが機能するのはなぜですか? プロジェクトで jQuery と一緒に Google チャートを使用したい場合、これは実行可能な方法でしょうか?

4

1 に答える 1