javascript - 在我的 morris.js 图中,X 轴上的日期在月份日期之前添加了数字 19
问题描述
这是从数据库中获取数据并将数据放入数组中的 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>
解决方案
如果要在 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>
推荐阅读
- python-3.x - RASA 聊天机器人框架在训练时出错:fit() 为关键字参数“batch_size”获得了多个值
- elasticsearch-5 - Elassandra 搜索复制数据
- r - 如何使用列名更改表的值
- javascript - Angular 7 Universal:不渲染内部组件
- python - 使用flask爬取图片和美汤过程不退出
- javascript - 将 Creative Tim 的 Material Kit Pro React 前端与 React-Redux-Firebase 生成器后端集成
- jmeter - 如何在jmeter中获取当前失败url的父url?
- python-3.x - FileNotFoundError:[Errno 2] 没有这样的文件或目录:'synonyms.yaml'
- java - Android 富文本 Mark Down
- xml - 架构文件名未检测命名空间