谷歌图表中的实时图表

Question

我不知道在 StackOverflow 中询问是否已经太多，但我对自己的能力感到非常疲惫和失望。我一直在做这个图表 3 个月，但没有成功。无论如何，我正在再次尝试谷歌图表，我正在寻求帮助。

我的 livedata.php（time_stamp(named ts),ph,moist 是我数据库中的数据值）以 json 格式显示：

[{"ts":"12","ph":736,"moist":92},{"ts":"27","ph":0,"moist":0},{"ts":"21","ph":192,"moist":24},{"ts":"15","ph":0,"moist":0}]

即 "ts"(time stamp('d')) 显示一个月中的特定日期（本示例为八月）。 “ph”和“水分”是该特定日期的总体值。 显然我在这里制作图表，我知道我是一个充满野心的笨蛋我正在尝试创建一个看起来像这样的实时图表

现在我的问题是我发现下面的这段代码适用于他们的示例，但尝试我的 PHP JSON 失败。

function drawChart() {
    var jsonData = $.ajax({
        url: 'livedata.php',
        dataType: 'json',
        async: false
    })

    .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.LineChart($('#chart').get(0));
        chart.draw(data, {
            title: 'Soil Analysis'
        });
    });

}
// load chart lib
google.load('visualization', '1', {
    packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);

Answer 1

这里有几个问题，我会尽力帮助...

对于初学者，请使用当前版本的谷歌图表...

使用这个 --> <script src="https://www.gstatic.com/charts/loader.js"></script>

jsapi 是旧版本...

不是这个 --> <script src="https://www.google.com/jsapi"></script>

这只会改变load 语句

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

---

至于 ajax async: false 已被弃用，删除它...

---

接下来，数据表的构造器只接受特定格式的json数据
在这里找到 --> Format of the Constructor's JavaScript Literal data Parameter

把参数留空

var data = new google.visualization.DataTable();

最后，发布的 json 示例不包含 time_stamp 的属性

看起来像ts，你可以尝试使用当前月份来代替

推荐类似下面的...

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

function drawChart() {
  $.ajax({
    url: 'livedata.php',
    dataType: 'json'
  }).done(function (results) {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');

    $.each(results, function (i, row) {
      var today = new Date();

      data.addRow([
        new Date(today.getFullYear(), today.getMonth(), row.ts),
        parseFloat(row.ph),
        parseFloat(row.moist)
      ]);
    });

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, {
      title: 'Soil Analysis'
    });
  });
}