Question

我尝试使用visual studio显示谷歌注释图表，通过ajax＆amp; amp; JSON数据。我尝试了很多不同的格式，但date列似乎并不喜欢我传递的日期格式。

当我运行它时，从我的测试数据创建的json.parse结果是：

[
    ["Thu Dec 24 2015 18:00:00 GMT-0600 (Central Standard Time)",1094,"0","test"], 
    ["Wed Dec 16 2015 18:00:00 GMT-0600 (Central Standard Time)",4000,"2","test"], 
    ["Mon Dec 14 2015 18:00:00 GMT-0600 (Central Standard Time)",7888,"4","test"], 
    ["Sun Dec 13 2015 18:00:00 GMT-0600 (Central Standard Time)",10804,"0",""], 
    ["Wed Dec 09 2015 18:00:00 GMT-0600 (Central Standard Time)",3878,"0",""],
    ["Tue Dec 08 2015 18:00:00 GMT-0600 (Central Standard Time)",1312,"0",""], 
    ["Mon Dec 07 2015 18:00:00 GMT-0600 (Central Standard Time)",2565,"1","test"]
]

最后我收到错误：

JavaScript运行时错误：类型不匹配。价值星期四2015年12月24日 18:00:00 GMT-0600（中央标准时间）与类型日期不符列索引0。

我一直在寻找一个没有运气的解决方案。

<script type="text/javascript">
function drawAnnoChart() {
    var dUser = document.getElementById('MainContent_lblUsername').innerHTML;
    var dUnit = document.getElementById('MainContent_hfUnitChoice').value;
    var data = new google.visualization.DataTable();
    dateFormatter = new google.visualization.DateFormat({ formatType: 'short' });

    data.addColumn('date', 'Date');
    data.addColumn('number', 'Distance');
    data.addColumn('string', 'Felt');
    data.addColumn('string', 'Notes');

    $.ajax({
        type: "POST",
        url: "me.aspx/GetSwimData",
        data: JSON.stringify({ 'dUser': dUser, 'dUnit': dUnit }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var dstring = '';
            for (var i = 0; i < r.d.length; i++) {
                r.d[i][0] = '"' + new Date(r.d[i][0]) + '"';
                r.d[i][2] = '"' + r.d[i][2] + '"';
                r.d[i][3] = '"' + r.d[i][3] + '"';
                if (i == 0) { dstring = '[' + r.d[i] + ']'; }
                else { dstring = dstring + ',' + '[' + r.d[i] + ']'; }
            }
            dstring = '[' + dstring + ']';
            data.addRows(JSON.parse(dstring));
        },
        failure: function (r) {
            alert(r);
        },
        error: function (r) {
            alert(r);
        }
    });

    var chart = new  google.visualization.AnnotationChart(document.getElementById('chart_div'));
    var options = {
        displayAnnotations: true
    };
    chart.draw(data, options);
}

</script>

Answer 1

只需要正确格式化日期，这样的事情应该有用......

google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawAnnoChart);


function drawAnnoChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('date', 'Date');
    data.addColumn('number', 'Distance');
    data.addColumn('string', 'Felt');
    data.addColumn('string', 'Notes');

    var dataArr = [
        ["Thu Dec 24 2015 18:00:00 GMT-0600 (Central Standard Time)",1094,"0","test"], 
        ["Wed Dec 16 2015 18:00:00 GMT-0600 (Central Standard Time)",4000,"2","test"], 
        ["Mon Dec 14 2015 18:00:00 GMT-0600 (Central Standard Time)",7888,"4","test"], 
        ["Sun Dec 13 2015 18:00:00 GMT-0600 (Central Standard Time)",10804,"0",""], 
        ["Wed Dec 09 2015 18:00:00 GMT-0600 (Central Standard Time)",3878,"0",""],
        ["Tue Dec 08 2015 18:00:00 GMT-0600 (Central Standard Time)",1312,"0",""], 
        ["Mon Dec 07 2015 18:00:00 GMT-0600 (Central Standard Time)",2565,"1","test"]
    ];

    for (var i = 0; i < dataArr.length; i++) {
        data.addRow([
            new Date(dataArr[i][0].substr(4, 20)),
            dataArr[i][1],
            dataArr[i][2],
            dataArr[i][3]
        ]);
    }
  
    var chart = new  google.visualization.AnnotationChart(document.getElementById('chart_div'));
    var options = {
        displayAnnotations: true
    };
    chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

尝试返回类似的内容：

[
    ["Date(2015,12,24,18,0,0)",1094,"0","test"], 
    ["Date(2015,12,16,18,0,0)",4000,"2","test"], 
    ["Date(2015,12,14,18,0,0)",7888,"4","test"], 
    ["Date(2015,12,13,18,0,0)",10804,"0",""], 
    ["Date(2015,12,9,18,0,0)",3878,"0",""],
    ["Date(2015,12,8,18,0,0)",1312,"0",""], 
    ["Date(2015,12,7,18,0,0)",2565,"1","test"]
]

Answer 3

感谢两个答案。我通过改变填充数据表的方式解决了这个问题。我使用datatable.setValue方法来单独设置单元格的值。

将日期从webmethod传递到Google注释图表

3 个答案: