0

我开始使用 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 请求显然失败了（由 Chrome 开发工具中的红色 X 表示）。该图表肯定会出现在页面上并且可以按我的预期工作，但是。为什么当前的迭代可以工作，而将所有内容都放在 document.ready 中却不行？如果我想在一个项目中使用谷歌图表和 jQuery，这会是一种可行的方法吗？

4

1 回答 1

4

There is no need to put the chart code inside a document ready call - in fact, you are more likely to encounter problems doing that than you are if you just leave it on its own:

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
});

On another note, I see you are calling $('#chart').fadeIn(); after drawing the chart. I presume that this means that chart is hidden prior to drawing, which can cause problems in some browsers. The recommended course of action is to unhide the div prior to drawing and hide it again immediately after drawing (from a "ready" event handler). You can then call the fadeIn effect:

$('#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);
于 2013-10-29T16:20:40.050 回答