我正在尝试使用 Highcharts 创建图表，但是我无法以正确的时间间隔显示读数。
正如您所看到的，图表显示的是凌晨 1 点的结果，但是您可以看到，我的数据库中没有与下图中的结果值 25 相对应的凌晨 1 点
我的数据库结构
Highcharts php代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>FlatWEB - Free Responsive Website HTML5 Template</title>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="chrome=1"><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="dns-prefetch" href="http://fonts.googleapis.com/">
<link rel="dns-prefetch" href="http://ajax.googleapis.com/">
<link rel="dns-prefetch" href="http://html5shim.googlecode.com/">
<link rel="dns-prefetch" href="http://google-analytics.com/">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144-retina.png">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic">
<link rel="stylesheet" type="text/css" href="styles/resetadmin.css">
<link rel="stylesheet" type="text/css" href="styles/stylesgraph.css">
<link rel="stylesheet" type="text/css" href="styles/font-awesomeadmin.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="date.js"></script>
<script type="text/javascript">
var options;
var chart;
$(document).ready(function() {
init();
});
function init() {
$('#back_btn').hide();
options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
$('#dateDisplay').text(this.category);
$.getJSON("datasoil.php?dateParam="+this.category, function(json){
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
options.xAxis.labels = {
formatter: function() {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
}
$.getJSON("datasoil.php", function(json){
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
</script>
<!--[if IE]><link href="http://www.3818.com.ar/styles/fix-old-ie.css" media="all" type="text/css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
#ads-sidebar{
margin-right:15px!important;
}
</style>
</head>
<body>
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>.chromeFrameInstallDefaultStyle { width: 100%; border: 5px solid #ffa700; }</style><div id="prompt"></div>
<script>window.attachEvent("onload", function() {CFInstall.check({mode: "overlay", node: "prompt"});});</script>
<![endif]-->
<a class="scroll-point" id="home"></a>
<div id="top">
<nav>
<div class="logo clearfix"><a href="/ags/final/index.html#home"></a></div>
<ul id="menu">
<li class="first"><a href="/ags/final/index.html#home">Home</a></li>
<li><a href="/ags/final/index.html#about">About</a></li>
<li><a href="/ags/final/index.html#contact">Contact Us</a></li>
<li><a href="/ags/final/index.html#freebies">Login</a></li>
</ul>
<form class="menu-dropdown hidden">
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="/ags/final/index.html#home">Home</option>
<option value="/ags/final/index.html#about">About</option>
<option value="/ags/final/index.html#contact">Contact US</option>
<option value="/ags/final/index.html#freebies">Login</option>
</select>
</form>
<a href="#menu-footer" class="menu-btn"></a>
</nav>
</div>
<div id="top">
</div>
<header>
<div class="wrapper">
<div class="content">
<hgroup>
<h1>Soil Sensor Readings</h1>
</hgroup>
</header>
<a class="scroll-point" id="about"></a>
<div class="sectiongrey">
</div>
<a class="scroll-point" id="freebies"></a>
<div class="clear"></div>
<div class="sectionteal">
</div>
<a class="scroll-point" id="contact"></a>
<div class="clear"></div>
<div class="sectionorange">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script
<section>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</br>
   <a href=""class="button">Refresh</a>
<a href=""class="button">Back</a>
</br>
</br>
</section>
</div>
<div class="sectionblue">
<footer id="footer">
<div class="wrapper">
<div class="left-content">
<a id="menu-footer"></a>
<div class="logo"><img src="img/logo.png" width="136" height="36"></div>
<nav class="menu-footer">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#freebies">Freebies</a></li>
<li><a href="#clients">Clients</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="right-content">
<div class="social">
<ul>
<li><a href="http://twitter.com/egrappler" target="_blank" rel="nofollow" class="icon-twitter"></a></li>
<li><a href="http://www.facebook.com/EGrappler" target="_blank" rel="nofollow" class="icon-facebook"></a></li>
<li><a href="https://plus.google.com/102572598506883739879" target="_blank" rel="nofollow" class="icon-google-plus"></a></li>
<li><a href="http://github.com/mshahbazsaleem" target="_blank" rel="nofollow" class="icon-github"></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/top-bar.js" ></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/bsa-ads.js" ></script>
<script src="js/modernizr.custom.js" type="text/javascript"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/jquery.flip.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.3.1.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.0.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<!--Dynamically creates analytics markup-->
</body>
</html>
Highcharts 数据库连接代码:
<?php
$con = mysql_connect("localhost","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("demo", $con);
if (isset($_GET["dateParam"])) {
$sql = mysql_query("SELECT time, value FROM soil WHERE time LIKE '".$_GET["dateParam"]."%'");
} else {
$sql = mysql_query("SELECT DATE_FORMAT(time, '%Y-%m-%d') as time, AVG(value) as value FROM soil GROUP BY DATE_FORMAT(time, '%Y-%m-%d')");
}
$result['name'] = 'Foot Traffic Count';
while($r = mysql_fetch_array($sql)) {
$datetime = $r['time'];
$result['category'][] = $datetime;
$result['data'][] = $r['value'];
}
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
有人可以告诉我图表未在正确时间显示数据的原因是什么以及可能的解决方案吗
最佳答案
您的浏览器显示用户本地时区的图表时间，而您的数据被视为 GMT/UTC。您现在的时间是 GMT - 6 小时，这就是图表中的时间偏差 6 小时的原因。
发生这种情况的原因之一可能是页面上加载了太多 *.js 文件。摆脱所有这些东西，将你的图表放入一个简单的页面，除了 jQuery 和 Highcharts，然后再试一次。它会工作得很好。
关于php - Highcharts 未显示正确的数据时间戳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22241917/