0

Google.DataTable.Net.Wrapper を使用して JSON データを Google チャートに渡し、折れ線グラフを作成しようとしています。私の Web サービスへの呼び出しは、完全に有効に見える JSON を返していますが、Google から「テーブルには列がありません」というエラーしか表示されません。私はこれをあまりにも長い間見てきましたが、何が問題なのかわかりません。

レンダリングされた JS コードは以下のとおりです。

<script type=text/javascript>
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);


    function drawChart() {
        var jsonData = $.ajax({
            type: "POST",
            url: "ChartData.asmx/getChartData",
            data: "{'numberToReturn': 'AvgPriceSqFt', 'parish': 'EBR', 'sub': 'AZALEA LAKES', 'timeFrame': '1Year'}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: false
        }).responseText;
        var data = new google.visualization.DataTable(jsonData, 0.6);
        var options = { width: 1000, curveType: "function", vAxis: { maxValue: 200 },
            title: "Average Price Per Square Foot"
        };
        var chart = new google.visualization.LineChart(document.getElementById('AvgPriceSqFt'));
            chart.draw(data, options);
        }


    </script>
     <div id="AvgPriceSqFt"></div>

返される JSON は次のとおりです (私には完全に有効に見えます)。

{
 "cols": 
    [
        {"type": "string" ,"id": "Date" }, 
        {"type": "number" ,"id": "AZALEA LAKES" }
    ], 
 "rows" : 
    [
        {"c" : [{"v": "01-2013"}, {"v": 128.6}]}, 
    {"c" : [{"v": "02-2013"}, {"v": 115.84}]}, 
    {"c" : [{"v": "03-2013"}, {"v": 113.7}]}, 
    {"c" : [{"v": "04-2013"}, {"v": 118.09}]}, 
    {"c" : [{"v": "06-2013"}, {"v": 97.01}]}, 
    {"c" : [{"v": "07-2013"}, {"v": 128.57}]}, 
    {"c" : [{"v": "08-2013"}, {"v": 98.57}]}, 
    {"c" : [{"v": "09-2013"}, {"v": 125.54}]}
    ]
}

.NET ラッパーを使用してデータを生成する .NET コードは次のとおりです。

[WebMethod]
        public string getChartData(string numberToReturn, string parish, string sub, string timeFrame)
        {
        google.DataTable gdt = new google.DataTable();
        sql.DataTable sdt = new sql.DataTable();

        gdt.AddColumn(new google.Column(google.ColumnType.String, "Date", "Date"));
        gdt.AddColumn(new google.Column(google.ColumnType.Number, sub, "Subdivision"));
        sdt = GetSqlData(numberToReturn, parish, sub, timeFrame);
        for (int i = 0; i <= sdt.Rows.Count - 1; i++)
        {
            var row = gdt.NewRow();
            row.AddCellRange(new[] {
                new google.Cell(sdt.Rows[i]["date"].ToString()),
                new google.Cell(sdt.Rows[i]["number"].ToString())
            });
            gdt.AddRow(row);
        }



        return gdt.GetJson();
    }
4

1 に答える 1

0

このことを必要以上に複雑にしていることに気がついたので、KISS (Keep It Simple Stupid) の原則に戻ることにしました。これには、私の問題が解決された次の変更が含まれていました。

1.) getChartData Web サービスを呼び出してデータを JSON として返すコードを削除しました。これは、Google .NET Datatable ラッパーを使用しなくなったことも意味します。

2.) 現在、Google テーブルをレンダリングするための Javascript をプログラムで生成しているため、arrayToDataTable 構造を構築しています (以前使用していた DataTable よりもはるかに単純で機密性が低くなります)。

動的に生成された Javascript は次のようになり、Google Chart がレンダリングされます。

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
   ['Date', 'AZALEA LAKES'],
   ['01-2013', 128.6], 
   ['02-2013', 115.84], 
   ['03-2013', 113.7],
   ['04-2013', 118.09], 
   ['06-2013', 97.01],
   ['07-2013', 128.57], 
   ['08-2013', 98.57], 
   ['09-2013', 125.54]]);

var options = {width: 1000, curveType: "function", vAxis: { maxValue: 200 }, 
           title: "Average Price Per Square Foot"};  
var chart = new google.visualization.LineChart(document.getElementById('AvgPriceSqFt')); 
                    chart.draw(data, options); }

Web サービスの呼び出しを機能させるために時間を無駄にしてしまったことをただ残念に思います。それはなんと巨大な時間の浪費でした。学ぶべき教訓 - コード例で誰かが特定の方法で何かを行ったからといって、それを正確に実行する必要があるわけではありません。もっと簡単にできるなら、そうしてください。これが他の誰かに役立つことを願っています。

于 2014-01-08T14:19:04.607 に答える