首先,我必须承认我对jQuery和Json的了解不太好。基本上,我的json编码读起来是这样的["2013-06-18 09:42:30",6.21],["2013-06.18 09:44:30",6.57],["201306-18 10:01:49",6.61],……这些是给定日期和时间内电池电压的结果,不断更新。有数以百计的记录。我知道这个时间戳在绘制图表时是无效的,所以昨天我试图在jSfiddle中调整jQuery以获得结果并将其转换为图表。在Jsfidle工作时,它说我的代码很好,但我得到了一个空白的容器区域。
有人能指导我如何将日期时间戳转换为UTC,以便绘制图表吗。
我调整过的jQuery看起来是这样的:
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Battery Voltage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x) +' : '+ this.y +" V";
}
},
series: [{
name: 'Battery Volatge',
data: []
}]
});
function requestData() {
$.ajax({
url: 'data.php',
datatype: "json",
success: function(data) {
alert(data);
chart.series[0].setData(data);
},
cache: false
});
}
我的PHP看起来是这样的:
<?php
header("Content-type: text/json");
$dbc = mysql_connect('xxxxx','xxxxx','xxxxx') or die(mysql_error());
mysql_select_db('xxxxx',$dbc) or die(mysql_error());
$result = mysql_query("SELECT COUNT(*) AS count FROM Station_State");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$SQL = "SELECT ss_Stamp,ss_BatteryStatus FROM Station_State WHERE Station_State_Index > 371298 AND ss_Station_idx = 34 ORDER BY ss_Stamp";
$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$row[ss_BatteryStatus] = (float) $row[ss_BatteryStatus];
$rows[$i]=array($row[ss_Stamp],$row[ss_BatteryStatus]);
$i++;
}
echo json_encode($rows);
?>
这可能是一个基本问题,但我仍在学习,所以任何建议都将不胜感激。如果你需要更多的信息,或者我提到的任何听起来模糊的东西,请告诉我。
感谢
您可以简单地预处理数据。在设置所有点的数据循环之前,将该字符串转换为时间戳,例如:
for (var i = 0; i < data.length; i++ ){
data[i][0] = new Date(data[i][0]).getTime();
}
完美工作的过帐代码。唯一的问题是弹出一个带有编码数据的窗口。jQuery代码:
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
borderwidth: 0,
events: {
load: requestData
}},
title: {
text: 'Battery Graph'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Battery Performance Voltage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x) +' : '+ this.y +" V";
}
},
series: [{
showInLegend: false,
name: 'Time vs Volatge',
data: []
}]
});
function requestData() {
$.ajax({
url: 'bdata.php',
datatype: "json",
success: function(data) {
alert(data);
for (var i = 0; i < data.length; i++ ){
data[i][0] = new Date(data[i][0]).getTime();
}
chart.series[0].setData(data);
},
cache: false
});
};
});
});
我的PHP代码如下:
<?php
header("Content-type: text/json");
$dbc = mysql_connect('xxxx','xxxx','xxxx') or die(mysql_error());
mysql_select_db('xxxx',$dbc) or die(mysql_error());
$result = mysql_query("SELECT COUNT(*) AS count FROM xxxx");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$SQL = "SELECT ss_Stamp,ss_BatteryStatus FROM Station_State WHERE Station_State_Index > 377708 AND ss_Station_idx = 34 ORDER BY ss_Stamp";
$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$row[ss_BatteryStatus] = (float) $row[ss_BatteryStatus];
$rows[$i]=array($row[ss_Stamp],$row[ss_BatteryStatus]);
$i++;
}
echo json_encode($rows);
?>
谢谢你,帕维尔。你帮了我很大的忙。