2

在我的 play 应用程序中，我将一些 JSON 输出发送到我的视图，以显示谷歌饼图。渲染 js 时出现问题

Object {cols: [{id: 'title', label: 'Title' , type: 'string'},{id: 'unitPrice', label: 'Unit Price', type: 'int'}],rows: [ has no method 'getColumnType'×

这条消息是我尝试使用 Google Chart API 绘制饼图所得到的全部信息。这甚至意味着什么？“没有方法'getColumnType'”

任何洞察力都会受到极大的赞赏。我的代码，到目前为止：

<!DOCTYPE html>

<html>
<head>
<title>PayView</title>
   <head>    
        <script type="text/javascript">var pieChartData;</script>
        <script type="text/javascript">var loads = 0;</script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});      
            google.setOnLoadCallback(function() {
                ++loads;
                if (loads == 2)
                drawVisualization();
            });

            function drawVisualization() {
                $('.log').html('pieChartData: ' + pieChartData);
                new google.visualization.PieChart(document.getElementById('visualization')).
                draw(pieChartData, {title:"Purchases"});
            }               

            $(document).ready(function() {
                $(function() {
                    pieChartData = new google.visualization.DataTable();
                    pieChartData.addColumn('string', 'Title');
                    pieChartData.addColumn('number', 'Unit Price');

                    var getJSon2 = $.ajax({
                        url: '@routes.Application.getJson()',
                        processData:false,
                        type: 'GET',
                        beforeSend:function(jqXHR, settings){                   
                            jqXHR.setRequestHeader("Content-Type", "application/json");
                        },
                        success: function(data, textStatus, jqXHR){                         
                            ++loads;
                            if (loads == 2)
                                drawVisualization();
                            process_items(data);   
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                        },
                        complete: function(jqXHR,textStatus){                   
                        }   
                    );

                    var process_items = function(data){                     
                        pieChartData.addRows(data.length);
                        $.each(data, function(index, item) {
                            $("#purchases").append("<li>" + item.name + "</li>");
                            pieChartData.setCell(index, 0, item.title);
                            pieChartData.setCell(index, 1, item.unitPrice); 
                        });
                    });
                });         
            };  
        });     
        </script>       
    </head>
    <body>
        <div class="log"></div>
        <div id="purchases"></div>
        <div id="visualization" style="width: 500px; height: 300px;"></div>
    </body>
</html>
4

2 回答 2

2

你也可以给函数一个参数

function drawChart(draw)
{
    if(draw > 0)
    {
      var data=....;
      var options = ....;
      var chart = ....;
      chart.draw(data,options)
    }
}

你在你的ajax中调用这个函数，给出一个值drawChart(1)

于 2012-09-26T11:18:55.563 回答
1

您正在尝试使用在调用完成之前从 ajax 调用结果构建的“googleData”字符串。

您将不得不安装一些等待谷歌库加载完成以及您的 ajax 调用的东西。这可能看起来像这样：

        var loads = 0;
        google.load("visualization", "1", {packages:["corechart"]});      
        google.setOnLoadCallback(function() {
          ++loads;
          if (loads == 2)
            drawVisualization();
        });

    // then in your "ready" handler:


            success: function(data, textStatus, jqXHR){
                process_items(data);
                ++loads:
                if (loads == 2)
                  drawVisualization();
            },

当 ajax 调用完成和 google 事情完成时，那个（不优雅的）设置会增加一个计数器。两个处理程序都检查它们是否是最后一个完成的，如果是，则调用“draw”函数。

于 2012-07-07T16:31:10.770 回答