这是从数据库中获取数据并将数据放入数组中的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>关于javascript - 在我的 morris.js 图表中，X 轴上的日期在月日日期之前添加数字 19，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64626453/