使用 JQuery 循环向 Google 图表动态添加行

Question

我想循环从 C# 返回的 JSON 以动态地将行添加到谷歌图表。我一次又一次地使用相同的代码，它不会加载到图表中。

我可以看到 Json 返回浏览器并使用 RestClient 对其进行了测试，因此我很高兴 C# 位可以正常工作，但我不明白为什么 Json 不会加载到 Google 折线图中并创建折线。图表Cannot read property 'getTime' of null 上显示错误。我尝试了几种不同的方法来为 data.AddRow 创建数组。

JQuery Ajax 调用：

$.ajax({
    url: '@Url.Action("GetJsonChartData", "ProjectCharts")',
    datatype: 'json',
    type: 'get',
    async: false,
    data: { serial: serial, uid: uid, from: from, to: to },
    contentType: 'application/json; charset=utf-8',
    success: function (d) {
        $.each(d, function (index, item) {                        
            data.addRow([new Date(item.ReadingDate), Number(item.ReadingValue), item.ToolTip]);                   
        });
    },
    error: function () {
        alert("Error loading chart data.")
    } 
});

我的 Json 看起来像：

   [{
    "ReadingDate": "2018-12-04 09:43:39",
    "ReadingValue": "17.5",
    "ToolTip": "Tue, 04 Dec 18 09:43\r\n Value: 17.5"
  },
  {
    "ReadingDate": "2018-12-04 09:45:39",
    "ReadingValue": "16.8",
    "ToolTip": "Tue, 04 Dec 18 09:45\r\n Value: 16.8"
  },
  {
    "ReadingDate": "2018-12-04 09:47:39",
    "ReadingValue": "16.1",
    "ToolTip": "Tue, 04 Dec 18 09:47\r\n Value: 16.1"
  },
  {
    "ReadingDate": "2018-12-04 09:49:39",
    "ReadingValue": "15.7",
    "ToolTip": "Tue, 04 Dec 18 09:49\r\n Value: 15.7"
  }]

我按如下方式创建 Json：

public JsonResult GetJsonChartData(string serial, string uid, string from, string to) {           
    var g = new GetChartData(_configuration);
    var items = g.GetChartDataFromSqlServer(serial, uid, f, t);
    return Json(JsonConvert.SerializeObject(items, Formatting.Indented));
} 

TIA

Answer 1

图表似乎画得很好，使用相同的数据，只是在这里硬编码......

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn({type: 'date', label: 'Date'});
  data.addColumn({type: 'number', label: 'Value'});
  data.addColumn({type: 'string', role: 'tooltip'});

  var d = [{
    "ReadingDate": "2018-12-04 09:43:39",
    "ReadingValue": "17.5",
    "ToolTip": "Tue, 04 Dec 18 09:43\r\n Value: 17.5"
  },
  {
    "ReadingDate": "2018-12-04 09:45:39",
    "ReadingValue": "16.8",
    "ToolTip": "Tue, 04 Dec 18 09:45\r\n Value: 16.8"
  },
  {
    "ReadingDate": "2018-12-04 09:47:39",
    "ReadingValue": "16.1",
    "ToolTip": "Tue, 04 Dec 18 09:47\r\n Value: 16.1"
  },
  {
    "ReadingDate": "2018-12-04 09:49:39",
    "ReadingValue": "15.7",
    "ToolTip": "Tue, 04 Dec 18 09:49\r\n Value: 15.7"
  }];

  $.each(d, function (index, item) {
    data.addRow([new Date(item.ReadingDate), Number(item.ReadingValue), item.ToolTip]);
  });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Answer 2

我仍然不知道为什么这在另一个应用程序中有效并且在这个应用程序中不起作用。我注意到 for each 循环没有被命中，并且我在控制台中收到有关 Json 数据的错误，如上所示。它将来自 C# 的 Json 返回字符串视为一个长对象。

我将 parseJSON 添加到 JQuery 中并且它工作正常。

 $.ajax({
            url: 'ProjectCharts/GetJsonChartData',
            datatype: 'json',
            type: 'get',
            async: false,
            data: { serial: serial, uid: uid, from: from, to: to },
            contentType: 'application/json; charset=utf-8',
            success: function (d) {
                var parsedData = $.parseJSON(d);
                console.log("data: " + parsedData);               
                $.each(parsedData, function (index, item) {                    
                    data.addRow([new Date(item.ReadingDate), Number(item.ReadingValue)]);
                });
            },
            error: function () {
                alert("Error loading chart");
            }

如果有人可以向我解释为什么这最初不起作用，我真的很想知道。