2

Playアプリケーションでは、Googleの円グラフを表示するために、JSON出力をビューに送信します。それがjsをレンダリングするときに物事がうまくいかない

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

このメッセージは、GoogleChartAPIを使用して円グラフを作成しようとしたときに得られるすべてのメッセージです。これはどういう意味ですか？"メソッドなし'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」文字列を使用しようとしています。

googleライブラリのロードと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が終了したときにカウンターをインクリメントします。両方のハンドラーは、それらが最後に終了するかどうかを確認し、終了する場合は「描画」関数を呼び出します。

于 2012-07-07T16:31:10.770 に答える