Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/468.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/13.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript PHP JSON中未在图表JS中显示的数据_Javascript_Json_Chart.js - Fatal编程技术网

Javascript PHP JSON中未在图表JS中显示的数据

Javascript PHP JSON中未在图表JS中显示的数据,javascript,json,chart.js,Javascript,Json,Chart.js,您好,我正在尝试使用Chartjs显示一个动态折线图,其中包含使用PHP以JSON格式从SQL中提取的数据。已成功选择数据,但未成功显示空白图表,敬请提供帮助 $(document).ready(function() { var dataPointsA = [] var dataPointsB = [] $.ajax({ type: 'GET', url: 'data.php', dataType: 'json', success: function

您好,我正在尝试使用Chartjs显示一个动态折线图,其中包含使用PHP以JSON格式从SQL中提取的数据。已成功选择数据,但未成功显示空白图表,敬请提供帮助

$(document).ready(function() {
  var dataPointsA = []
  var dataPointsB = []

  $.ajax({
    type: 'GET',
    url: 'data.php',
    dataType: 'json',
    success: function(field) {

      for (var i = 0; i < field.length; i++) {
        dataPointsA.push({
          x: field[i].datetime,
          y: field[i].roomtemp
        });
        dataPointsB.push({
          x: field[i].datetime,
          y: field[i].tanktemp
        });
      }
console.log(field);
      var chartdata = {
        title: {
          text: "Fish Tank Monitor"
        },

        data: [{
          type: "line",
          name: "line1",
          dataPoints: dataPointsA
        }, {
          type: "line",
          name: "line2",
          dataPoints: dataPointsB
        }, ]
      };
console.log(chartdata);

      var ctx = mycanvas.getContext('2d');

      var barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                backgroundColor: 'rgba(0, 119, 204, 0.3)'
            });
    }
  });
});

我认为这是由于日期时间格式不正确造成的。您使用的datetime键用作字符串。我认为您需要应用一个日期和时间过滤器

[{"datetime":"2018-07-28 22:33:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:32:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:31:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:30:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:29:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:28:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:27:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:26:00.000","roomtemp":26.8,"tanktemp":28.4},{"datetime":"2018-07-28 22:25:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:24:00.000","roomtemp":26.9,"tanktemp":28.4}]