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

本文关键字：谷歌 填充 格式化数据 | 更新日期: 2023-09-27 18:04:27

我试图使用谷歌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什么是错的，如何解决这个问题?

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

第一列之后的任何一列都应该是数字
除非被赋予特定的角色，例如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

请参阅下面的工作代码片段…

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>

回答你的问题:

"在运行上述代码时，我得到一个错误，如0x800a139e - JavaScript运行时错误:第0行有8列，但必须有2"什么是错的，如何解决?

您正在添加整个表，并且它正在读取行数作为列数。它期望两列8行数据。如果要从类中访问数据，请将其分解为如下内容:

在不查看所有代码的情况下，这是您需要的算法类型的示例:

为对象的data创建一个类:

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访问数据。

相关文章：