ChartJS-显示MySql表中的数据时格式化日期时间X轴

Question

我已经修改了此site上的示例，并设法达到了可以从MySql数据库检索数据并将其绘制好的位置，但是我无法正确地将X轴格式化为日期时间轴。

linegraph.html：

<!DOCTYPE html>
<html>
  <head>
    <title>ChartJS - LineGraph</title>
    <style>
      .chart-container {
        width: 1000px;
        height: auto;
      }
    </style>
  </head>
  <body>
tst1
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>
    tst2
    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.js"></script>
    <script type="text/javascript" src="js/linegraph.js"></script>
  </body>
</html>

followersdata.php

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'xxxxxxxxxxxxxxxxxxxxx');
define('DB_PASSWORD', 'xxxxxxxxxxxxxxxxxxxxx');
define('DB_NAME', 'test');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
  die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT reading_time, value1 FROM Sensor");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
  $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);

followersdata.php的示例输出

[{"reading_time":"2020-02-24 22:38:48","value1":"1.10"},{"reading_time":"2020-02-24 22:39:18","value1":"1.10"},{"reading_time":"2020-02-24 22:39:49","value1":"1.10"},{"reading_time":"2020-02-24 22:40:19","value1":"1.10"},{"reading_time":"2020-02-24 22:40:49","value1":"1.10"},{"reading_time":"2020-02-24 22:41:19","value1":"1.10"},{"reading_time":"2020-02-24 22:41:49","value1":"1.10"},{"reading_time":"2020-02-24 22:42:19","value1":"1.10"},{"reading_time":"2020-02-24 22:42:49","value1":"1.10"},{"reading_time":"2020-02-24 22:43:19","value1":"1.10"},{"reading_time":"2020-02-24 22:43:50","value1":"1.10"},{"reading_time":"2020-02-24 22:44:20","value1":"1.10"},{"reading_time":"2020-02-24 22:44:50","value1":"1.10"},{"reading_time":"2020-02-24 22:45:20","value1":"1.10"},{"reading_time":"2020-02-24 22:45:50","value1":"1.10"},{"reading_time":"2020-02-24 22:46:21","value1":"1.10"},{"reading_time":"2020-02-24 22:46:51","value1":"1.10"},{"reading_time":"2020-02-24 22:47:21","value1":"1.10"},

linegraph.js：

$(document).ready(function(){
$.ajax({
url : "followersdata.php",

type : "GET",
success : function(data){
  console.log(data);

  var datetime = [];
  var value1  = [];
  //var twitter_follower = [];
  //var googleplus_follower = [];

  for(var i in data) {
    datetime.push(data[i].reading_time);
    value1.push(data[i].value1);
    //twitter_follower.push(data[i].twitter);
    //googleplus_follower.push(data[i].googleplus);
  }

  var chartdata = {
    labels: datetime,
    datasets: [
      {
        label: "Value1",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(59, 89, 152, 0.75)",
        borderColor: "rgba(59, 89, 152, 1)",
        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
        data: value1
      //},
      //{
      //  label: "twitter",
      //  fill: false,
      //  lineTension: 0.1,
      //  backgroundColor: "rgba(29, 202, 255, 0.75)",
      //  borderColor: "rgba(29, 202, 255, 1)",
      //  pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
      //  pointHoverBorderColor: "rgba(29, 202, 255, 1)",
      //  data: twitter_follower
      //},
      //{
      //  label: "googleplus",
       // fill: false,
       // lineTension: 0.1,
       // backgroundColor: "rgba(211, 72, 54, 0.75)",
       // borderColor: "rgba(211, 72, 54, 1)",
       // pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
       // pointHoverBorderColor: "rgba(211, 72, 54, 1)",
       // data: googleplus_follower
      }
    ],
    options: {
        maintainAspectRatio: false,
    animation: false,
        legend: {display: true  },
    scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
        }



 };



  var ctx = $("#mycanvas");

  var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata
  });
},
error : function(data) {

}
});
});

结果图：

我尝试使用选项

options: {
    maintainAspectRatio: false,
animation: false,
    legend: {display: true  },
scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
    }

但是它似乎没有将轴格式化为MMM D，或者如果我尝试将小时，小时等设置为格式，则为>]

我要去哪里错了？由于图例也没有显示，我如何使选项起作用。

我已经在此站点上修改了示例，并设法到达可以从MySql数据库检索数据并将其绘制好的位置，但是我无法正确地将X轴格式化为日期时间轴。 ..

Answer 1

使用此sql查询。这将为您提供所需的结果，而无需使用重新格式化。

Answer 2

您的代码中的问题是图表options嵌套在data对象内部，并且实际上被Chart.js忽略。将其上移到下一个层次。否则，xAxis定义看起来就很好。也无需像一个注释所建议的那样显式地解析日期，因为它是可以由Date解析的格式。

ChartJS-显示MySql表中的数据时格式化日期时间X轴

问题描述投票：0回答：2

2个回答

最新问题

ChartJS-显示MySql表中的数据时格式化日期时间X轴

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2