Question

我使用Google.DataTable.Net.Wrapper将JSON数据传递到Google图表并尝试创建折线图。对我的Web服务的调用是传回JSON，这看起来对我来说完全有效，但我只是从Google获得“Table has no columns”错误。我一直在看这个问题的时间太长，看不出问题所在，所以任何帮助都会受到赞赏。

我呈现的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();
    }

Answer 1

我终于想到我让这件事情变得比它需要的复杂得多，我决定回到KISS（Keep It Simple Stupid）原则。这涉及以下更改，我的问题已经解决：

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

我很抱歉，我浪费了所有时间试图让网络服务电话工作。 GIANT时间浪费了多少。要学习的课程 - 仅仅因为某人在代码示例中以某种方式做某事，并不意味着你应该完全遵循它。如果你可以使它更简单，那么这样做。我希望这有助于其他人。

谷歌图表使用.net包装生成＆＃39;表没有列＆＃39;错误

1 个答案: