格式化数据以填充谷歌图表

Question

我正在尝试使用 Google API 显示折线图。同样，我尝试从 ASP.net Webmethod 格式化数据，例如

 [WebMethod]
 public static List<object> GetChartData()
 {
        List<object> chartData = new List<object>();

        chartData.Add(new object[]

        {
           "DateTime", "Bugs" 
         });

        chartData.Add(new object[]
                {
                  "2011", "12",
                  "2014","45",
                  "2015","40",
                  "2016","98"
                });

        return chartData;
 }

这是我的客户端代码。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var options = {
            title: 'Bug Tracker'
        };

        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.LineChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

</script>

在运行上述代码时，我收到类似0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2 的错误，这是什么问题以及如何解决？

Answer 1

第一列之后的任何列都应该是一个数字
除非被赋予特定角色，例如tooltip

试试这个……

chartData.Add(new object[] {"DateTime", "Bugs"});
chartData.Add(new object[] {"2011", 12});
chartData.Add(new object[] {"2014", 45});
chartData.Add(new object[] {"2015", 40});
chartData.Add(new object[] {"2016", 98});

或者在客户端，调整注释中的代码...

var charData = r.d;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');

for (var i = 0; i < charData.length; i++) {
  data.addRow([charData[i].DateTime, pareseInt(charData[i].Bugs)]);
}

编辑

数据如下...
[["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]

那么只需要arrayToDataTable创建DataTable

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var r = {};

    r.d = [["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]];

    var data = google.visualization.arrayToDataTable(r.d);

    var options = {
      title: "Bug Tracker",
      pointSize: 5
    };

    var lineChart = new google.visualization.LineChart(document.getElementById('chart'));
    lineChart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Answer 2

回答你的问题：

“在运行上述代码时，我收到类似 0x800a139e 的错误 - JavaScript 运行时错误：第 0 行有 8 列，但必须有 2 列”出了什么问题以及如何解决？

您正在添加整个表格，并且它正在读取行数作为列数。它期望两列有 8 行数据。把它分解成这样，如果你从类中访问数据。：

在没有看到所有代码的情况下，这是您需要的算法类型的示例：

为您的对象数据创建一个类：

public class MyData{

    public string Year {get; set;}
    public int Bugs {get; set;}

    var bugs = new List<MyData>BugList():
    // add data.

使用您的 ajax 获取该数据到一个方法，该方法将获取数据列表并将其序列化为 Json 格式。

return JsonConvert.SerializeObject(bugs);

然后您可以从 javascript 中访问数据。为了模块化，将代码的图表部分从 C# 数据中分离出来是很重要的。因此，图表的详细信息将添加到创建图表的位置。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in chardata) {
    data.addRow([chardata.Year[i], ints[chardata.Bugs[i]]]);
}

作为示例尝试以下操作：

var str = new string[3] {"2011", "2012", "2013"};

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in str) {
    data.addRow([str[i], ints[i]]);
}

在像这样简单的东西上测试它，然后通过 ajax 访问您的数据。