在我的 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在我的 morris.js 图中，X 轴上的日期在月份日期之前添加了数字 19
【发布时间】：2021-02-13 23:35:18
【问题描述】：

这是从数据库中获取数据并将数据放入数组的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>

【问题讨论】：

混入 php 的 javascript 代码难以阅读。你可以在浏览器中运行它，查看源代码，然后复制并粘贴呈现的 javascript 源代码，这样它就不会包含 php 标签了吗？
你去我更新了它

标签： javascript php html jquery morris.js

【解决方案1】：

如果要在 x 轴上显示不带年份的日期，则需要用 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>

【讨论】：