高图表不显示正确的数据时间戳
我正在尝试使用高级图表创建图表，但是我无法以正确的时间间隔显示读数。
正如您可以看到图表在凌晨1点显示结果但是您可以看到我的数据库中没有1am对应于下图中的结果值25
我的数据库结构
高图表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>
高图表数据库连接代码：
<?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);
?>
有人可以告诉我图表在正确的时间没有显示数据的原因是什么，可能的解决方案是什么
2 个答案:
答案 0 :(得分：0)
您的浏览器会在用户本地的时区显示图表时间，而您的数据则被视为GMT / UTC。你在GMT - 6小时，这就是为什么图表中的时间减少了6个小时。
这可能是因为在您的页面上加载了太多* .js文件的方式之一。摆脱所有这些东西，把你的图表放到一个简单的页面，只有jQuery和Highcharts，然后再试一次。它会工作得很好。
答案 1 :(得分：0)
Highcharts使用时间戳（以毫秒为单位的时间），因此您需要将日期（如2014-07-03）转换为时间戳。要实现这一点，你可以使用PHP函数或使用javascript。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？