javascript - Google 图表 API 和 jQuery

Question

我开始使用 Google Charts 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 表示)。然而，该图表肯定会出现在页面上，并且按照我的预期工作。为什么当前的迭代可以工作，而将所有内容放入 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);