在我的 morris.js 图表中，X 轴上的日期在月日之前加上数字 19

Question

这是 sql 从数据库中获取数据并将数据放入数组中的方法。它还将日期从年月日格式拆分为月日格式

$sql = "SELECT * FROM Time WHERE Event_ID='$event' AND Student_ID='$runner'";
        $result=$conn->query($sql);     
        while($row = $result->fetch_assoc())
        {
            $date[]= date('m-d',strtotime($row['Date']));
            $time[]=$row['time'];
            $count=$count+1;
        }

这是用于创建图表的脚本。

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [     { day: '11-02', t:37},
      { day: '11-04', t:22},
    {day: '11-06', t: 83}
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'day',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['t'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Time']
});

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
  
  
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">Last 10 Years Profit, Purchase and Sale Data</h3>   
   <br /><br />
   <div id="myfirstchart" style="height: 250px;"></div>
  </div>

Answer 1

如果要在 x-axis 中显示没有年份的日期，您需要将其格式化为 javascript 而不是 php。当你从 php 得到一个像“11-05”这样的日期时，morris 将它解析回一个 javascript 日期对象，它没有年份部分，所以它最终将日期解析为“1911 年 5 月”。在php中单独保留格式，然后在morris中使用xLabelFormat设置格式，即

 $date[] = $row['Date'];

和

  element: 'myfirstchart',
  xLabelFormat: function(date) { return (date.getMonth() + 1) + "-" + date.getDate(); }
  data: [ //...

片段：

<!DOCTYPE html>
<html>
 <head>
  <title>chart with PHP & Mysql | lisenme.com </title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
  
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">Last 10 Years Profit, Purchase and Sale Data</h3>   
   <br /><br />
   <div id="myfirstchart" style="height: 250px;"></div>
  </div>
 </body>
</html>
// this is the script that is used to create the graph.
<script>
new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  xLabelFormat: function(date) { return (date.getMonth() + 1) + "-" + date.getDate(); },
  data: [     { day: '2020-11-02', t:37},
      { day: '2020-11-04', t:22},
    {day: '2020-11-06', t: 83}
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'day',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['t'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Time']
});
</script>

在我的 morris.js 图表中，X 轴上的日期在月日之前加上数字 19

in my morris.js graph the date on the X axis is adding the number 19 before the month-day date

html

javascript

php

jquery

morris.js