0

我从 ac# 方法返回了以下数据：

 <input id="hdMessageCountByVDate" type="hidden"    
  value="[{"Count":43,"Type":"3","Date":"2013-04-14"},
  {"Count":3,"Type":"2","Date":"2013-03-11"}]" name="hdMessageCountByVDate">

我想要做的是创建一个图表，它显示以下内容：

总计数 (43,2)，与给定日期 (2013-04-14,2013-03-11) 的关联类型 (3,2)

目前只有两个条目，但这些会增加时间，因此日期会有所不同。

我如何将这些数据放入可以正确呈现的图表中。

到目前为止我有这个：

         function drawMessageByVDate() {
            var hdValue = document.getElementById("<%=hdMessageCountByVDate.ClientID%>").value;
            var response = $.parseJSON(hdValue);
            var data = new google.visualization.DataTable();

            data.addColumn('string', 'Type');
            data.addColumn('number', 'Count');
            data.addColumn('string', 'Date');

            for (var i = 0; i < response.length; i++) {
                var row = new Array();
                row[0] = response[i].Type;
                row[1] = parseInt(response[i].Count);
                row[1] = response[i].Date;

                data.addRow(row);
            }
            var options = {
                title: 'My chart'


            };


            var chart = new google.visualization.ColumnChart(document.getElementById
            ('msgCountByVDate_Chart'));
            chart.draw(data, options);
4

1 回答 1

-1

初步想法：

看起来你有一个错误

row[1] = response[i].Date;

应该

row[2] = response[i].Date;

此外，如果您希望 Google 正确处理日期，那么 api 似乎需要一个实际的 javascript 日期对象，而不仅仅是日期的字符串表示。对于现代浏览器，这可能很简单

data.addColumn('date', 'Date');
....
row[2] = new Date(response[i].Date);

但是，为了支持旧版浏览器（例如 IE<9），您可能需要更复杂的东西，例如

data.addColumn('date', 'Date');
....
var d = response[i].Date;
row[2] = new Date(parseInt(d.substr(0,4)), parseInt(d.substr(5,2))-1, parseInt(d.substr(8,2)));

进一步研究 看起来谷歌实际上期望数据的一个旋转版本，例如

Date       | Type 2 | Type 3
2013-04-14 |      0 |     43
2013-03-11 |      3 |      0

有关示例，请参见https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

于 2013-04-14T16:48:02.457 回答