在我的 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
这是 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-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>
这是 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-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>