Javascript 格式化数据以填充google图表

我正在尝试使用GoogleAPI显示折线图。出于同样的原因，我尝试将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;
 }

[WebMethod]
公共静态列表GetChartData（）
{
列表图表数据=新列表（）；
chartData.Add（新对象[]
{
“日期时间”，“错误”
});
chartData.Add（新对象[]
{
"2011", "12",
"2014","45",
"2015","40",
"2016","98"
});
返回图表数据；
}

这是我的客户端代码

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

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
标题：“Bug追踪器”
};
$.ajax({
类型：“POST”，
url:“WebForm1.aspx/GetChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.LineChart（$（“#图”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}

---

运行上述代码时，我遇到了一个错误，如

0x800a139e-JavaScript运行时错误：第0行有8列，但必须有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.

然后可以从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访问数据。

第一列之后的任何列都应该是数字
除非指定了特定的角色，例如

工具提示

试试这个

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

请将该数据写入ajax响应中，并将其放入FIDLE中，以便我们可以尝试使用共享代码签出，但获取

0x800a138f-JavaScript运行时错误：无法获取未定义或空引用的属性“0”

看到了您的示例。问题在于我的服务器端代码格式。无论我与帖子分享了什么代码，都是完整的。你能帮我纠正一下吗？谢谢在C#上添加的共享代码，这是我的客户端'var charData=r.d；var data=new google.visualization.DataTable（）；data.addColumn（'string'，'Year'）；data.addColumn（'number'，'Bugs'）；对于（charData中的var i）{data.addRow（[charData.DateTime[i]，ints[charData.Bugs[i]]）；}`但它给我的错误是

0x800a138f-JavaScript运行时错误：无法获取未定义或空引用的属性“0”

错误被删除，但我没有看到任何图表被渲染。我们没有添加标记id和图表类型。我需要在

var data=new google.visualization.DataTable（）添加它吗添加
var选项={title:“Bug跟踪器”，pointSize:5}；var lineChart=new google.visualization.lineChart（document.getElementById（'chart'）；线条图。绘制（数据、选项）。现在获取图表是空的..也用最新渲染的图表图片更新了帖子。请帮助我。谢谢这是来自控制台的数据
[[“日期时间”，“错误”]，[“2011”，12]，“2011”，45]，“2011”，40]，“2011”，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)]);
}