Php 如何在Highchart的jQuery中转换日期时间戳以获得json中的正确格式?
首先,我必须承认我对jQuery和Json不太了解。 基本上我的json编码是这样的[“2013-06-18 09:42:30”,6.21],“2013-06-18 09:44:30”,6.57],“2013-06-18 10:01:49”,6.61],……这些是给定日期和时间内电池电压不断更新的结果。有数百条记录。 我知道这个时间戳在绘制图表时是无效的,所以昨天我试图在JSFIDLE中调整jQuery以获得结果并将其转换为图表。 在JSFIDLE中工作时,它说我的代码很好,但我得到了一个空白的容器区域 有谁能告诉我如何将日期时间戳转换为UTC,以便绘制图表 我正在调整的jQuery如下所示:Php 如何在Highchart的jQuery中转换日期时间戳以获得json中的正确格式?,php,jquery,json,highcharts,utc,Php,Jquery,Json,Highcharts,Utc,首先,我必须承认我对jQuery和Json不太了解。 基本上我的json编码是这样的[“2013-06-18 09:42:30”,6.21],“2013-06-18 09:44:30”,6.57],“2013-06-18 10:01:49”,6.61],……这些是给定日期和时间内电池电压不断更新的结果。有数百条记录。 我知道这个时间戳在绘制图表时是无效的,所以昨天我试图在JSFIDLE中调整jQuery以获得结果并将其转换为图表。 在JSFIDLE中工作时,它说我的代码很好,但我得到了一个空白的
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
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);
?>
var图;
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
defaultSeriesType:“样条线”,
活动:{
加载:请求数据
}},
xAxis:{
键入:“日期时间”,
日期时间标签格式:{
月份:'%e.%b',
年份:'%b'
}
},
亚克斯:{
标题:{
文字:“蓄电池电压”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
Highcharts.dateFormat(“%a%d%b%H:%M:%S”,this.x)+':“+this.y+“V”;
}
},
系列:[{
名称:“电池电压”,
数据:[]
}]
});
函数requestData(){
$.ajax({
url:'data.php',
数据类型:“json”,
成功:功能(数据){
警报(数据);
chart.series[0].setData(数据);
},
缓存:false
});
}
我的PHP如下所示:
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
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();
}
for(var i=0;i
发布完美工作的代码。唯一的问题是弹出一个带有编码数据的窗口。
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
});
};
});
});
$(函数(){
$(文档).ready(函数(){
Highcharts.setOptions({
全球:{
useUTC:false
}
});
var图;
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
defaultSeriesType:“样条线”,
边框宽度:0,
活动:{
加载:请求数据
}},
标题:{
文本:“电池图”
},
xAxis:{
键入:“日期时间”,
日期时间标签格式:{
月份:'%e.%b',
年份:'%b'
}
},
亚克斯:{
标题:{
文字:“蓄电池性能电压”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
Highcharts.dateFormat(“%a%d%b%H:%M:%S”,this.x)+':“+this.y+“V”;
}
},
系列:[{
showInLegend:false,
名称:“时间与价值”,
数据:[]
}]
});
函数requestData(){
$.ajax({
url:'bdata.php',
数据类型:“json”,
成功:功能(数据){
警报(数据);
对于(var i=0;i
我的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);
?>
谢谢你,波威尔。你帮了大忙。谢谢你,波维。我只是想知道这段代码是否应该在函数请求数据进行预处理之前编写?如果您能友好一点,您是否也可以回答,如果没有显示图表,数百条记录可能是另一个问题?如果您的数据是这种格式:
[“2013-06-18 09:42:30”,6.21],
-否,只要您不想在一张100像素宽的图表中显示10000个点,它就可以正常工作。将此代码段添加到:chart.series[0].setData(data)之前代码>。我在chart.series[0].setData(data)之前添加了您的代码片段;但它没有显示任何结果。你在使用Chrome吗?如果没有安装它。然后打开您的站点并转到:选项->工具->Javascript控制台。现在您有了控制台:),然后您将看到编号为的错误。点击它。您将看到该行:showInLegend=false,
您认为该行有什么问题?有=
,而应该是:
。在第69行中也有一个错误。这是一个额外的逗号,删除它。之后,让我知道这是否有效:)将您的代码打包到$(function(){/*create chart here*/})(
)。否则将加载不完整的DOM。