我必须在动态折线图中显示实时功耗值。为此，我使用了 highcharts 库。我希望 x 轴上的时间和 y 轴上的功率都取自 mysql 数据库。但即使从数据库中正确提取时间和功耗值后，我也无法在高位图上获得正确的时间。
为了开发代码，我在数据库中制作了以下表格。我插入了仅用于开发代码的假定值。
mysql> use sample;
Database changed
mysql> select * from Power_data;
+-------+----------+---------------------+
| SR_NO | POWER_D1 | DATE_TIME |
+-------+----------+---------------------+
| 1 | 294.975 | 2016-02-04 06:01:00 |
| 2 | 295.837 | 2016-02-04 06:02:00 |
| 3 | 279.45 | 2016-02-04 06:03:00 |
| 4 | 288.765 | 2016-02-04 06:04:00 |
| 5 | 298.08 | 2016-02-04 06:05:00 |
| 6 | 319.297 | 2016-02-04 06:06:00 |
+-------+----------+---------------------+
6 rows in set (0.00 sec)
mysql> select * from counter
-> ;
+-----+---------+---------+---------+
| cid | select1 | select2 | select3 |
+-----+---------+---------+---------+
| 1 | 1 | 1 | 1 |
+-----+---------+---------+---------+
1 row in set (0.00 sec)
然后我在文件 live.php 中编写了实时服务器的代码。 这段代码按照 highcharts 的要求以毫秒的形式正确地给出了时间。
<?php
// Set the JSON header
header("Content-type: text/json");
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'root';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn ) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('sample');
$sql1='SELECT select1 FROM counter WHERE cid=1';
$r=mysql_fetch_array(mysql_query($sql1,$conn));
$i=$r['select1'];
//echo $i;
$sql2='SELECT * FROM Power_data WHERE SR_NO='.$i;
$result=mysql_query($sql2,$conn);
if(!$result){
die('Could not get data:' . mysql_error());
}
$i++;
$sql3='UPDATE counter SET select1='.$i.' WHERE cid=1';
mysql_query($sql3,$conn);
while($row=mysql_fetch_array($result)){
extract($row);
$y=$POWER_D1;
$x=strtotime($DATE_TIME);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret,JSON_NUMERIC_CHECK);
}
mysql_close($conn);
?>
在此之后，我获取实时数据并将其显示在折线图中的代码如下所示。文件名为 client.php:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart;
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'live.php',
success: function(point) {
//document.write(point);
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我的图表在 x 轴上显示了错误的时间值。有人请告诉我是否遗漏了什么。
最佳答案
尝试改变你的线路:
$x=strtotime($DATE_TIME);
收件人:
$x=strtotime($DATE_TIME)*1000;
Highcharts datetime 系列需要以 毫秒 为单位的时间戳形式的 x 值。 PHPs strtotime 以秒 返回时间戳。
关于javascript - 我的图表没有在 x 轴上显示正确的时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35826603/