时间戳

首页 > 解决方案 > 谷歌折线图不显示数据

javascript - 谷歌折线图不显示数据

问题描述

我有以下代码给我一个 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 轴作为值来绘制图表。

标签： javascriptasp.net-mvcgoogle-visualization

解决方案

首先在 $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 调用是异步的，谷歌图表从不接收任何数据对象。修复将绘制图表代码放入成功函数的问题。

推荐阅读