Google Charts API 使用 $(document).ready 方法显示空白屏幕

发布于 2024-10-20 15:09:53 字数 1415 浏览 6 评论 0原文

我有几个函数可以使用 Google Charts API 实例化各种图表。

当我在没有 jQuery 的 $(document).ready 方法的情况下调用它们时,一切正常。但用这种方法,我看到的是空白屏幕。

为什么?

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
function drawColumnChart1(){..some code..}
function drawColumnChart2(){..some code..}
function drawGeoChart(){.some code..}

//This works fine.
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);



//This doesn't work
$(document).ready(function(){
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});

更新 这是我在 Firebug 中遇到的错误:

uncaught exception: [Exception... "Could not convert JavaScript argument"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20"  data: no]
http://www.google.com/jsapi
Line 22

I've got several functions that instantiate various charts using Google Charts API.

When I call them without jQuery's $(document).ready method, everything works fine. But with that method, I'm looking at blank screen.

Why?

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
function drawColumnChart1(){..some code..}
function drawColumnChart2(){..some code..}
function drawGeoChart(){.some code..}

//This works fine.
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);



//This doesn't work
$(document).ready(function(){
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});

UPDATE
Here is the error I get in Firebug:

uncaught exception: [Exception... "Could not convert JavaScript argument"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20"  data: no]
http://www.google.com/jsapi
Line 22

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

只涨不跌 2024-10-27 15:09:53

根据 google 可视化文档,您需要在 onload 或 jquery 准备就绪之前加载可视化包。我建议在 jsapi 脚本引用之后立即加载,如下所示。

否则你会得到一个 1) google is not Define (参考错误) 或 2) 如果使用 ajax 可能会得到一个空白响应 &空白页,没有错误。

加载顺序:(使用您的示例)

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>

$(document).ready(function(){
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});

According to the google visualization documentation you need to load the visual package(s) prior to onload or jquery ready. I would suggest loading immediately after the jsapi script reference as shown below.

Otherwise you will get a 1) google is not defined (reference error) or 2) if using ajax possibly a blank response & blank page with no errors.

load sequence: (using your example)

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>

$(document).ready(function(){
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});
枕花眠 2024-10-27 15:09:53

这是我正在使用的范例。为 google.load 方法设置回调,并且根本不使用 google.setOnLoadCallback (据我所知这是不需要的)。

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

Here is the paradigm I am using. Set a callback for the google.load method, and don't use the google.setOnLoadCallback at all (AFAIK this is not needed).

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);
}
無處可尋 2024-10-27 15:09:53

嗨,这个解决方案对我不起作用,显然(我猜我不确定)当你在 jquery 对象中调用它时,谷歌库有一些范围问题,所以解决方案非常简单(尽管它不是)这么简单:s)定义一个全局变量并分配google库:

var localGoogle = google;

看起来很有趣呵呵:)...然后使用你定义的变量来调用setOnCallback,它对我有用,我希望它对你有用..

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

Hi that solution doesn't worked for me, apparently (i'm guessing i'm not sure) google library has some scope issues when you call it inside a jquery object, so the solution is quite simple (although got it wasn't so simple :s) define a global variable and assign the google librari:

var localGoogle = google;

looks funny huh :)... then use the variable you defined to invoque the setOnCallback, it worked for me i hope it work for you..

$(document).ready(function(){
    localGoogle.setOnLoadCallback(window.drawColumnChart1);
}
池木 2024-10-27 15:09:53

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

有关详细信息,请参阅 https://developers.google.com/loader/#AutoLoading

因此,您可以像平常一样从 jquery 文档就绪事件中执行所有操作。

还有一个向导可以为您设置 URL,但目前该链接已损坏。无论如何,它就是:http://code.google.com/apis/loader/ autoloader-wizard.html

For an alternate solution you can use 'autoloading' to include the packages you want in the script tag. This negates the need for "google.setOnLoadCallback".

see https://developers.google.com/loader/#AutoLoading for details.

So, you can do everything as you would normally from as jquery document ready event.

There is also a wizard that can set up a URL for you, but currently the link is broken. Here it is anyway: http://code.google.com/apis/loader/autoloader-wizard.html

原谅我要高飞 2024-10-27 15:09:53

这对我有用:

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

        }

演示: jsfiddle

This works for me:

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

        }

Demo: jsfiddle

人疚 2024-10-27 15:09:53
            <!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>
            <!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>
冬天的雪花 2024-10-27 15:09:53

尝试关闭对 ready 的调用?

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

Try to close the call to ready?

$(document).ready(function(){
    ...
});
^^^
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文