Javascript Google图表API和jQuery

我开始使用GoogleCharts API，并看到了它行为的一些奇怪方面。当我将google图表代码放在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表示）。然而，这张图表肯定会出现在页面上，并像我预期的那样发挥作用。为什么当前的迭代可以工作，而将所有内容都放在文档中。ready不行？如果我想在项目中与jQuery一起使用Google图表，这是一种可行的方法吗？

没有必要将图表代码放在文档就绪调用中-事实上，与单独使用相比，这样做更容易遇到问题：

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（）绘制图表后。我猜想这意味着在绘图之前，
图表
是隐藏的，这可能会在某些浏览器中导致问题。建议的操作过程是在绘制之前取消隐藏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);

无需将图表代码放在文档就绪调用中-事实上，如果您将其单独放置，则在执行此调用时更可能遇到问题：

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（）绘制图表后。我猜想这意味着在绘图之前，
图表
是隐藏的，这可能会在某些浏览器中导致问题。建议的操作过程是在绘制之前取消隐藏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);

在
（函数（$）{var google=window.google；…在这里调用任何谷歌图表代码}）（jQuery）
在
（函数（$）{var google=window.google；…在这里调用任何谷歌图表代码}）（jQuery）