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（保持简单愚蠢）原则。这涉及以下更改，其中我的问题已解决：

1.) 我去掉了调用 getChartData Web 服务并将我的数据作为 JSON 返回的代码。这也意味着我不再使用 Google .NET Datatable 包装器。

2.) 我现在以编程方式生成 Javascript 以呈现 Google 表，因此构建了一个 arrayToDataTable 结构（它比我使用的以前的 DataTable 更简单且不那么敏感）。

我的动态生成的 Javascript 现在如下所示，并且正在呈现我的 Google 图表：

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 回答