Передача дат из веб-метода в диаграмму аннотаций Google

Я пытаюсь отобразить диаграмму аннотаций Google с помощью Visual Studio, вызывая веб-метод через данные ajax и 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: несоответствие типов. Значение Чт, 24 декабря 2015 г., 18:00:00 GMT-0600 (центральное стандартное время) не соответствует дате типа в индексе столбца 0.

Я искал решение в течение 2 дней, но безуспешно.

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

javascript visual-studio google-visualization
person user5729209    schedule 30.12.2015    source источник
comment
форматирование и изменение порядка прозы   -  person Steve    schedule 30.12.2015

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте вернуть что-то вроде:

[
    ["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"]
]
person Saúl Martínez Vidals    schedule 30.12.2015

arrow_upward
0
arrow_downward

Просто нужно правильно отформатировать дату, что-то вроде этого должно работать...

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>

person WhiteHat    schedule 30.12.2015
comment
это не работает. Он передает недопустимое значение даты в datatable, что затем создает ошибку недопустимого символа. - person user5729209; 30.12.2015

arrow_upward
0
arrow_downward

благодаря обоим ответам. Я решил проблему, изменив способ заполнения таблицы данных. Я использовал метод datatable.setValue для индивидуальной установки значений ячеек.

person user5729209    schedule 30.12.2015