javascript - 带有时间的谷歌图表来自 php json

Question

我从文件 countrows.php 中得到这个 json 输出:

[  
   {  
      "time_stamp":"08:22:46 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:50 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:54 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:57 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:01 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:05 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:09 am",
      "ph":"8",
      "moist":"0"
   }
]

我想在图表中显示时间(来 self 的 json 文件)，特别是在水平方向。类似于下图，但黄绿线显示的是我的 json 文件中的时间。

顺便说一句，以下是我在 google 图表中的 javascript 代码，我需要有关如何处理以下代码的帮助:

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

// onload callback
function drawChart() {
  // JSONP request
  var jsonData = $.ajax({
    url: 'countrows.php',
    dataType: 'json',
  }).done(function (results) {
    var data = new google.visualization.DataTable(jsonData);

    data.addColumn('datetime', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');

    $.each(results, function (i, row) {
      data.addRow([
       new Date(row.time_stamp),
       parseFloat(row.ph),
       parseFloat(row.moist)
       ]);
    });

    var chart = new google.visualization.AreaChart($('#chart').get(0));

    chart.draw(data, {
      title: 'Soil Analysis',
      curveType: 'function',
      displayAnnotations: true,
      //legend: { position: 'bottom' }
      pointSize: 10
      hAxis: {format: 'Y,M,d,H';}
    });
  });
}

drawChart();

setInterval(drawChart, 10000);

Answer 1

最简单的方法是将第一列更改为 --> 'string'

data.addColumn('string', 'time_stamp');

此外，由于 ajax 是异步的，因此无需分配给变量，
删除这个 --> var jsonData =

并从数据表构造函数的参数中删除...

var data = new google.visualization.DataTable(jsonData);  // <-- remove jsonData

尝试以下代码片段...

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

// onload callback
function drawChart() {
  $.ajax({
    url: 'countrows.php',
    dataType: 'json'
  }).done(function (results) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');
    $.each(results, function (i, row) {
      data.addRow([
        row.time_stamp,
        parseFloat(row.ph),
        parseFloat(row.moist)
      ]);
    });
    var chart = new google.visualization.AreaChart($('#chart').get(0));
    chart.draw(data, {
      title: 'Soil Analysis',
      curveType: 'function',
      pointSize: 10
    });
  });
}
drawChart();
setInterval(drawChart, 10000);