Javascript 我的海图在x轴上没有显示正确的时间
我必须在动态折线图中显示实时功耗值。为此，我创建了一个有趣的图表库。我希望x轴上的时间和y轴上的功率都来自mysql数据库。但是，即使正确地从数据库中提取了时间和功耗值，我也无法在highchart上获得正确的时间 为了开发代码，我在数据库中制作了以下表格。我只为开发代码插入了假设值Javascript 我的海图在x轴上没有显示正确的时间,javascript,php,mysql,highcharts,Javascript,Php,Mysql,Highcharts,我必须在动态折线图中显示实时功耗值。为此，我创建了一个有趣的图表库。我希望x轴上的时间和y轴上的功率都来自mysql数据库。但是，即使正确地从数据库中提取了时间和功耗值，我也无法在highchart上获得正确的时间 为了开发代码，我在数据库中制作了以下表格。我只为开发代码插入了假设值 mysql> use sample; Database changed mysql> select * from Power_data; +-------+----------+------------
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)
<?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);
?>
<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=strtotime($DATE_TIME);
致：
Highchartsdatetime
系列期望x值以时间戳的形式出现，单位为毫秒。PHPsstrotime
以秒为单位返回时间戳嘿，我知道这不是问题的关键，但我建议您使用mysqli
（代表mysql改进）函数，而不是mysql
，因为最后一个函数已经不推荐使用。这里的更多信息：@fabionr无法解决问题，因为所有数据都是以正确的格式从mysql检索的。我认为问题在于javascript部分。@fabionr提出了一个很好的观点。由于列select1
是一个整数，并且不是由用户发起的，因此此代码似乎几乎忽略了SQL注入安全问题。但是，如果此列是用户创建的字符串（例如用户名），则$sql2
将易受攻击。因为这个数据库扩展已经被弃用，所以值得换一个更好的选择：PDO/mysql或mysqli。我在x轴上的时间还是错的。我检查了一下，发现highcharts的时间戳是正确的。但它在显示时没有正确地解释时间戳。那么你必须描述你当时实际看到的东西。“解释不对”是什么意思？预期和显示的差异有多大？这只是时区偏移吗？是的，我终于弄对了。实际上是时区偏移，它在x轴上给出了错误的时间。我添加了以下代码：Highcharts.setOptions（{global:{useUTC:false}}）；现在它可以正常工作了。。
$x=strtotime($DATE_TIME)*1000;