Jquery GoogleCharts API显示带有$（document.ready）方法的空白屏幕

我有几个使用GoogleCharts API实例化各种图表的函数

当我在没有jQuery的

$（document.ready

方法的情况下调用它们时，一切正常。但用这种方法，我看到的是空白屏幕

为什么?

---

尝试关闭对

ready

的呼叫

$(document).ready(function(){
    ...
});
^^^

这可能是最接近的答案，Ryan Wheale关于以下内容的回答也可能有帮助

---

根据谷歌可视化文档，您需要先加载可视化软件包，然后再加载到onload或jquery ready。我建议在jsapi脚本引用之后立即加载，如下所示

否则，您将得到1）google未定义（参考错误）或2）如果使用ajax，可能会得到一个空白响应&没有错误的空白页面

加载顺序：（使用您的示例）

load（“可视化”、“1”、{packages:[“piechart”、“corechart”、“geomap”]}）；
$（文档）.ready（函数（）{
setOnLoadCallback（window.drawColumnChart1）；
setOnLoadCallback（window.drawColumnChart2）；
setOnLoadCallback（window.drawArt）；
});

您好，该解决方案对我不起作用，显然（我猜我不确定）当您在jquery对象中调用google library时，google library存在一些范围问题，因此该解决方案非常简单（尽管不是那么简单：s）定义一个全局变量并分配google librari：

var localGoogle = google;

看起来很有趣哈：）。。。然后使用您定义的变量调用setOnCallback，它对我有效我希望它对您有效

$(document).ready(function(){
    localGoogle.setOnLoadCallback(window.drawColumnChart1);
}

---

对于备用解决方案，您可以使用“自动加载”将所需的包包含在脚本标记中。这就不需要“google.setOnLoadCallback”

有关详细信息，请参阅

因此，您可以像平常一样从jquery document ready事件中执行所有操作

---

还有一个向导可以为您设置URL，但当前链接已断开。不管怎么说，它就在这里：

这是我正在使用的范例。为google.load方法设置回调，并且根本不使用google.setOnLoadCallback（假定不需要）

你必须打电话 而不是

祝你好运

这对我很有用：

google.load("visualization", "1", {packages:["corechart"],   
        callback:function(){drawChart();}});
        //google.setOnLoadCallback(drawChart);
        function drawChart() {
        console.log("enter draw");
              var data = google.visualization.arrayToDataTable([
   ['Year', 'value', { role: 'style' } ],
   ['2010', 10, ' color: gray'],
   ['2010', 200, 'color: #76A7FA'],
   ['2020', 16, 'opacity: 0.2'],
   ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
   ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8;  
     fill-color: #BC5679; fill-opacity: 0.2']
   ]);
              var view = new google.visualization.DataView(data);

              var options = {
                title: 'Company Performance',
                tooltip: {isHtml: false},
                legend: 'none',
              };

              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

              chart.draw(view, options);

        }

演示：

load（“可视化”、“1”、{packages:[“corechart”]}）；
功能绘图图（gtitle、glabel、gwidth、gheight、gtype、gstart、gend、gid）{
$.ajax({
url:“http://localhost/reporte/response.php",
键入：“获取”，
数据类型：“JSON”，
cache:false，
async:false，
数据：{start:gstart，end:gend，id:gid}，
成功：功能（数据）{
var-len=0；
if（数据长度）
{
len=数据长度；
}
如果（len>0）
{
dataarray=[[gtitle，glabel]]；
对于（变量i=0；i

：）谢谢。这只是个打字错误。它是用真正的代码关闭的。@Andre:不，但我在寻找其他答案！看起来像是digitaljoel搞定了它。显然是$（document）。ready发生在google对象可用之前，这就是google.load在$（document）中失败的原因。ready或类似的东西。哦，这解决了我的空白页问题，谢谢！相反

var localGoogle = google;

$(document).ready(function(){
    localGoogle.setOnLoadCallback(window.drawColumnChart1);
}

MyChart.prototype.render = function() {
    var self = this;
    google.load("visualization", 
                "1", 
                { callback: function() { self.visualize(); }, 
                  packages: ["corechart"] }
               );
}

MyChart.prototype.visualize = function() {

    var data = google.visualization.arrayToDataTable(
    [
        ['Year', 'Sales', 'Expenses'],  
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]   
    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("mychart_div"));    
    chart.draw(data, options);
}

google.load("visualization", "1", {packages:["corechart"],   
        callback:function(){drawChart();}});
        //google.setOnLoadCallback(drawChart);
        function drawChart() {
        console.log("enter draw");
              var data = google.visualization.arrayToDataTable([
   ['Year', 'value', { role: 'style' } ],
   ['2010', 10, ' color: gray'],
   ['2010', 200, 'color: #76A7FA'],
   ['2020', 16, 'opacity: 0.2'],
   ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
   ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8;  
     fill-color: #BC5679; fill-opacity: 0.2']
   ]);
              var view = new google.visualization.DataView(data);

              var options = {
                title: 'Company Performance',
                tooltip: {isHtml: false},
                legend: 'none',
              };

              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

              chart.draw(view, options);

        }

            <!DOCTYPE html>
            <html>
            <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
            <script type="text/javascript">

            google.load("visualization", "1", {packages:["corechart"]});
            function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {

                $.ajax({
                        url: "http://localhost/reporte/response.php",
                                type: "GET",
                                dataType: "JSON",
                                cache: false,
                                async: false,
                                data: {start:gstart,end:gend,id:gid},
                                success: function(data) {
                                    var len = 0;
                                    if (data.length)
                                    {
                                    len = data.length;
                                    }

                                    if(len > 0)
                                    {
                                    dataarray = [[gtitle,glabel]];
                                        for (var i = 0; i< len; i++) {
                                            dataarray.push([data[i].label,data[i].value]);
                                        }
                                    }
                                    else if(len==0)
                                    {

                                    }
                                },
                                error:function(data) 
                                {


                                }
                        });

                    var values = new google.visualization.arrayToDataTable(dataarray);
                    var options = {title: gtitle,width:gwidth,height:gheight};

                            switch(gtype){
                                case 'PieChart':
                                    var chart = new google.visualization.PieChart(document.getElementById('chart'));
                                    break;
                                case 'LineChart':
                                    var chart = new google.visualization.LineChart(document.getElementById('chart'));
                                    break;
                                case 'ColumnChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                                case 'AreaChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                            }

                    chart.draw(values, options);


            }






            $(document).ready(function(){
            //drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
            //drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
            //drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
            drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
            });

            </script>
            </head>
            <body>

            <div id="chart"></div>

            </body>
            </html>