c# - 使用 JQuery 循环动态地将行添加到 Google Charts

Question

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

我可以看到 Json 返回到浏览器，并使用 RestClient 对其进行了测试，因此我很高兴 C# 位可以正常工作，但我不明白为什么 Json 不会加载到 Google 折线图中并创建折线。图表上显示错误无法读取 null 的属性“getTime”。我尝试了几种不同的方法来创建 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

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

请参阅以下工作片段...

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>