Линейные графики Google не показывают данные - PullRequest
Новая
       10

Линейные графики Google не показывают данные

0 голосов
/ 15 сентября 2018

У меня есть следующий код, который дает мне вывод JSON следующим образом: 

[{ReadingDate: "2018-09-14 00:00:00", ReadingValues: "17796"}
{ReadingDate: "2018-09-13 23:45:00", ReadingValues: "17793"}
{ReadingDate: "2018-09-13 23:30:00", ReadingValues: "17791"}
{ReadingDate: "2018-09-13 23:15:00", ReadingValues: "17789"}
{ReadingDate: "2018-09-13 23:00:00", ReadingValues: "17786"}
{ReadingDate: "2018-09-13 22:45:00", ReadingValues: "17783"}
{ReadingDate: "2018-09-13 22:30:00", ReadingValues: "17781"}
{ReadingDate: "2018-09-13 22:15:00", ReadingValues: "17778"}
{ReadingDate: "2018-09-13 22:00:00", ReadingValues: "17776"}]

Я проверил, что вывод моего действия передается и принимается страницей, и я рад, что это,Однако я не могу заставить его нарисовать линейный график с данными в нем.

Мой код диаграммы выглядит следующим образом: 

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');        
data.addColumn('number', 'Value');       

var options = {
    'legend': {
        'position': 'none'
    },
    'chartArea': {
        'width': '80%',
        'height': '80%'
    },
    title: 'Data'
};

$.ajax({
    url: '@Url.Action("GetChartData", "CheckData")',
    datatype: 'json',
    type: 'post',
    async: false,
    contentType: 'application/json; charset=utf-8',
    success: function (d) {  
        $.each(d, function (index, item) {  
            //data.addRows([[item.ReadingDate], [item.ReadingValues]]); 
            //data.addRows([item.ReadingDate], [item.ReadingValues]);                     
            data.addRows([item.ReadingDate, item.ReadingValues]);
        });
    },
    error: function () {
        alert("Error loading chart data.")
    }
});

var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));
chart.draw(data, options);

}

Я хочу построить графикдиаграмма с осью X в качестве даты и осью Y в качестве значения.

1 Ответ

0 голосов
/ 15 сентября 2018

Сначала поставьте строку ниже перед вызовом $ ajax 

var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));

, затем замените код успеха на 

$.each(d, function (index, item) {  
   data.addRow([new Date(item.ReadingDate), parseInt(item.ReadingValues)]);
});
chart.draw(data, options);

У вашего кода было три проблемы,

  1. Вы должны передать многомерный массив, если вы используете data.addRows, иначе используете data.addRow
  2. Вы определяете тип данных как дату и число, но передаете дату как строку, а цифру как строку.Который обрабатывает преобразование.
  3. Вы вызвали chart.draw сразу после инициализации вызова ajax.Поскольку вызовы ajax являются асинхронными, Google Chart никогда не получает никаких объектов данных.Чтобы исправить это, поместите код рисованной диаграммы в функцию успеха.
...