Google折线图不显示数据

Question

我有以下代码给我一个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轴为值。

Answer 1

首先在$ 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. 刚刚启动ajax调用后调用了chart.draw。由于ajax调用是异步的，因此谷歌图表永远不会收到任何数据对象。要解决这个问题，请将绘制图表代码置于成功函数中。