Php 高图xAxis不'；无法获得正确的时间格式
我用datepicker创建了一个图表。从SQL数据库中获取所选日期的datetime、open、high、low和close数据 我测试了格式化xAxis的每一种方法，使未缩放的时间间隔为1小时，如7:00 8:00 9:00 我希望能够放大，这样最小的间隔是1分钟，比如7:007:017:02 第一个问题是，对于每个点，格式总是看起来像yyyy-mm-dd hh:mm:ss。在改变了tickInvterval之后，它看起来更好了，但仍然是错误的，并且无法实现1分钟间隔的缩放功能。 将数据库拆分为单个日期和时间列后，我解决了日期问题，但显然highchart仍然没有意识到它是一个时间轴，因为xAxis设置如下所示：（应显示hh:mm，但图表显示hh:mm:ss） 至少我无意分割数据库，因为在查询过程中，应该有一种方法可以用来将SQLDateTime更改为javatime格式。 我搜索了好几天，但是没有找到正确的答案。。。也许是因为我对这东西太陌生了……：） 这是生成图表的代码：Php 高图xAxis不'；无法获得正确的时间格式,php,sql,datetime,highcharts,format,Php,Sql,Datetime,Highcharts,Format,我用datepicker创建了一个图表。从SQL数据库中获取所选日期的datetime、open、high、low和close数据 我测试了格式化xAxis的每一种方法，使未缩放的时间间隔为1小时，如7:00 8:00 9:00 我希望能够放大，这样最小的间隔是1分钟，比如7:007:017:02 第一个问题是，对于每个点，格式总是看起来像yyyy-mm-dd hh:mm:ss。在改变了tickInvterval之后，它看起来更好了，但仍然是错误的，并且无法实现1分钟间隔的缩放功能。 将数据库拆
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart:{
zoomType: 'x',
renderTo: 'container'
},
title: {
text: 'Charts',
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold'
}
},
subtitle: {
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
},
tickInterval: 60
},
yAxis: [{
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, {
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 1,
borderColor: '#666666',
crosshairs: true,
shared: true,
useHTML: true,
dateTimeLabelFormats: {
minute: '%H:%M'},
style: {
padding: 10,
fontWeight: 'bold'
},
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ this.x +'</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
},
shared: true
},
legend:
{
enabled: true,
itemStyle: {
color: '#eeeeee',
}
},
credits:
{
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(204, 204, 204)'],
[1, 'rgba(204, 204, 204,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
name: 'Graph2',
type: 'spline',
yAxis: 2,
color: '#89A54E',
enableMouseTracking: false,
data: []
}]
}
$.getJSON('data.php', function(json) {
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
});
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateParam="+dateText, function(json){
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
}
});
});
$（文档）.ready（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
选项={
图表：{
zoomType:'x'，
renderTo:“容器”
},
标题：{
文字：'图表'，
风格：{
fontFamily：“Verdana”，
fontSize:'20px'，
fontWeight:“粗体”
}
},
副标题:{
正文：“图表1”，
风格：{
fontFamily：“Verdana”，
fontSize:'15px'，
fontWeight:“粗体”
}
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
分钟：“%H:%M”，
},
间隔时间：60
},
yAxis:[{
标签：{
格式：“{value}”，
风格：{
颜色：“#eeeeee”
}
},
标题：{
文本：“实时”，
风格：{
颜色：“#eeeeee”
}
}
}, {
标题：{
启用：false，
文本：“Graph1”，
风格：{
颜色：“#4572A7”
}
},
标签：{
启用：false，
格式：“”，
风格：{
颜色：“#4572A7”
}
},
相反：对
},{
标题：{
启用：false，
文本：“Graph2”，
风格：{
颜色：“#89A54E”
}
},
对,，
标签：{
启用：false，
格式：“”，
风格：{
颜色：“#89A54E”
}
},
相反：对
}],
工具提示：{
背景颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0，'rgba（96,96,96,8）'，
[1，‘rgba（16,16,16,8）’]
]
},
边框宽度：1，
边框颜色：'#666666'，
十字准星：没错，
分享：是的，
是的，
日期时间标签格式：{
分钟：'%H:%M'}，
风格：{
填充：10，
fontWeight:“粗体”
},
格式化程序：函数（）{
var s=''+此.x+''；
$.each（this.points，function（i，point）{
s+='
'+point.series.name+'：'+point.y+''；
});
返回s；
},
分享：真的
},
图例：
{
启用：对，
项目样式：{
颜色：“#eeeeee”，
}
},
信用：
{
已启用：false
},
打印选项：{
样条曲线：{
线宽：4，
国家：{
悬停：{
线宽：5
}
},
标记：{
已启用：false
},
},
面积：{
填充颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0，'rgb（204204204）'，
[1，‘rgba（204204204,0）’]
]
},
线宽：1，
标记：{
已启用：false
},
影子：错，
国家：{
悬停：{
线宽：1
}
},
阈值：空
}
},
系列：[{
名称：“实时”，
类型：'区域'，
颜色：“#中交”，
数据：[]
}, {
名称：'Graph1'，
类型：“样条线”，
亚克西斯:1,，
颜色：“#0077cc”，
enableMouseTracking:false，
数据：[]
}, {
名称：“Graph2”，
类型：“样条线”，
亚克斯:2,，
颜色：“#89A54E”，
enableMouseTracking:false，
数据：[]
}]
}
$.getJSON（'data.php'，函数（json）{
val1=[]；
val2=[]；
val3=[]；
$.each（json、函数（键、值）{
val1.push（[value[0]，value[1]]）；
val2.push（[value[0]，value[2]]）；
val3.push（[value[0]，value[3]]）；
});
options.series[0]。data=json['data1']；
options.series[1].data=json['data2']；
options.series[2].data=json['data3']；
options.xAxis.categories=json['datetime']；
图表=新的高点图表。图表（选项）；
});
});
$（函数（）{
$（“#日期选择器”）。日期选择器({
在ShowDay之前：$.datepicker.noWeekends，
日期格式：“年月日”，
onSelect:function（dateText，inst）{
$.getJSON（“data.php？dateParam=“+dateText，函数（json））{
val1=[]；
val2=[]；
val3=[]；
$.each（json、函数（键、值）{
val1.push（[value[0]，value[1]]）；
val2.push（[value[0]，value[2]]）；
val3.推力（[v
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart:{
zoomType: 'x',
renderTo: 'container'
},
title: {
text: 'Charts',
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold'
}
},
subtitle: {
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
},
tickInterval: 60
},
yAxis: [{
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, {
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 1,
borderColor: '#666666',
crosshairs: true,
shared: true,
useHTML: true,
dateTimeLabelFormats: {
minute: '%H:%M'},
style: {
padding: 10,
fontWeight: 'bold'
},
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ this.x +'</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
},
shared: true
},
legend:
{
enabled: true,
itemStyle: {
color: '#eeeeee',
}
},
credits:
{
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(204, 204, 204)'],
[1, 'rgba(204, 204, 204,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
name: 'Graph2',
type: 'spline',
yAxis: 2,
color: '#89A54E',
enableMouseTracking: false,
data: []
}]
}
$.getJSON('data.php', function(json) {
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
});
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateParam="+dateText, function(json){
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
options.xAxis.categories = json['datetime'];
chart = new Highcharts.Chart(options);
});
}
});
});
<?php
session_start();
?>
<?php
define('DB_SERVER',"localhost");
define('DB_NAME',"db");
define('DB_USER',"");
define('DB_PASSWORD',"");
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);
if (isset($_GET["dateParam"])) {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE datetime LIKE '".$_GET["dateParam"]."%'");
} else {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE DATE(datetime) = CURDATE()");
}
while($r = mysql_fetch_array($sql)) {
$result['datetime'][] = $r['datetime'];
$result['data1'][] = $r['open'];
$result['data2'][] = $r['close'];
$result['data3'][] = $r['high'];
}
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
tickInterval: 60 * 10000
series: [{
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 60000, //every minute there is data.
name: 'Realtime',
type: 'area',
data: [8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500]
}]
maxZoom: 60000
options.xAxis.categories = json['datetime'];
$(document).ready(function() {
Highcharts.setOptions({
});
options = {
chart:
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgb(51, 51, 51)'],
[1, 'rgb(16, 16, 16)']
]
},
borderColor: '#666666',
borderWidth: 1,
borderRadius: 0,
zoomType: 'x',
maxZoom: 60000,
renderTo: 'container'
},
title:
{
text: 'Realtime',
margin: 50,
style: {
fontFamily: 'Verdana',
fontSize: '20px',
fontWeight: 'bold',
color: '#cccccc'
}
},
subtitle:
{
text: 'Chart 1',
style: {
fontFamily: 'Verdana',
fontSize: '15px',
fontWeight: 'bold',
color: '#CCCCCC'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'
}
},
yAxis: [{ // first yAxis
labels: {
format: '{value}',
style: {
color: '#eeeeee'
}
},
title: {
text: 'Realtime',
style: {
color: '#eeeeee'
}
}
}, { // Second yAxis
title: {
enabled: false,
text: 'Graph1',
style: {
color: '#4572A7'
}
},
labels: {
enabled: false,
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
},{ // Third yAxis
title: {
enabled: false,
text: 'Graph2',
style: {
color: '#89A54E'
}
},
reversed: true,
labels: {
enabled: false,
format: '',
style: {
color: '#89A54E'
}
},
opposite: true
}],
tooltip: {
xDateFormat: '%H:%M',
shared: true,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 1,
borderColor: '#666666',
crosshairs: true,
useHTML: true,
formatter: function() {
var s = '<b><span style="font-size: 12px; color: #cccccc">'+ Highcharts.dateFormat('%H:%M', this.x) +' Uhr</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
});
return s;
}
},
legend:
{
enabled: true,
itemStyle: {
color: '#eeeeee',
}
},
credits:
{
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(204, 204, 204)'],
[1, 'rgba(204, 204, 204,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Realtime',
type: 'area',
color: '#cccccc',
data: []
}, {
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Graph1',
type: 'spline',
yAxis: 1,
color: '#0077cc',
enableMouseTracking: false,
data: []
}, {
pointStart: Date.UTC(2010, 0, 1, 8),
pointInterval: 60000,
name: 'Graph2',
type: 'spline',
yAxis: 2,
color: '#89A54E',
enableMouseTracking: false,
data: []
}]
}
$.getJSON('data.php', function(json) {
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
chart = new Highcharts.Chart(options);
});
});
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateParam="+dateText, function(json){
val1 = [];
val2 = [];
val3 = [];
$.each(json, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
});
options.series[0].data = json['data1'];
options.series[1].data = json['data2'];
options.series[2].data = json['data3'];
chart = new Highcharts.Chart(options);
});
}
});
});