highcharts因为数据库中的日期不连续导致的数据错位该如何解决?
不好意思，又来问问题，因为最近在做学校的这个项目，然后对highcharts又不是很了解，所以有很多很基础的问题想请大家帮忙，还麻烦大家帮我详细解释一下。
我想利用数据库的数据画多条折线图，我的情况是我用getJSON来获取sql数据库中的数据，从而获得highcharts中x轴(categories-日期)和y轴(series-数量)的数据，但是由于两者格式不同，所以我是把两者分开来写后台的PHP。
现在我遇到的问题是，我需要画多条折线图，然而不是每一天每个折线图都有数据的，所以导致日期和数据错位，每条折线图都自动靠前。
之前问过这个问题，大家都建议我把categories和 series 两个php 合并，
请问大家两者怎么合并在同一个后台文件中，又怎么放到highcharts中?
我是真的一点也不会，谢谢。
1 前端highcharts
2 后台series.php
3 后台categories.php
4 部分数据库格式
5 时间错位错误的折线图
6 正确的折线图应该是
续上面的问题
我根据回答修改了代码，首先先把两个后台合并成一个
现在的问题是:
1. 无法用JSON调出series 中需要的new Date('日期') . getTime 的格式
2 .其次我用了以后无法把日期放在x轴上
我想利用数据库的数据画多条折线图，我的情况是我用getJSON来获取sql数据库中的数据，从而获得highcharts中x轴(categories-日期)和y轴(series-数量)的数据，但是由于两者格式不同，所以我是把两者分开来写后台的PHP。
现在我遇到的问题是，我需要画多条折线图，然而不是每一天每个折线图都有数据的，所以导致日期和数据错位，每条折线图都自动靠前。
之前问过这个问题，大家都建议我把categories和 series 两个php 合并，
请问大家两者怎么合并在同一个后台文件中，又怎么放到highcharts中?
我是真的一点也不会，谢谢。
1 前端highcharts
$(function () {
var chart = null;
$.getJSON("series".php", function(jsonser) {
$.getJSON("catgories.php", function(jsoncat) {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x'
},
title: {
text: 'my highcharts',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: jsoncat
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
crosshairs:[true],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
series: {
showCheckbox: true
},
line:{
events :{
checkboxClick: function(event) {
if(event.checked==true) {
this.show();
}
else {
this.hide();
}
},
legendItemClick:function(event) {
return false;
}
}
}
},
series: jsonser
},//highcharts
function(c) {
chart = c;
}
);//container
$('.change2').click(function(){
var self = $(this);
for(var i=0;i<chart.series.length;i++) {
var serie = chart.series[i];
serie.update({
type: self.data('type')
});
}
});//change
});//getjson
});//getjson
});//function [/i]2 后台series.php
[i]<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$sth = mysql_query("
//sql;
");
$rows = array();
$rows['name'] = 'test';
while($r = mysql_fetch_array($sth)) {
$rows['data'] = $r['COUNT_NB'];
}
$rows['selected'] = true;
$sth = mysql_query("
//sql;
");
$rows1 = array();
$rows1['name'] = 'test';
while($r = mysql_fetch_array($sth)) {
$rows1['data'] = $r['COUNT_NB'];
}
$rows1['selected'] = true;
$result = array();
array_push($result,$rows);
array_push($result,$rows2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>[/i]
3 后台categories.php
[i]<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$sth= mysql_query("
//sql;
");
while($r = mysql_fetch_array($sth)) {
$rows['categories'] = $r['EXTRACT_DATE'];
}
$result = $rows['categories'];
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>[/i]
4 部分数据库格式
5 时间错位错误的折线图
6 正确的折线图应该是
续上面的问题
我根据回答修改了代码，首先先把两个后台合并成一个
现在的问题是:
1. 无法用JSON调出series 中需要的new Date('日期') . getTime 的格式
<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("usestats", $con);
$sth = mysql_query("
//sql ;
");
$rows1 = array();
$rows1['name'] = 'test';
while($r = mysql_fetch_array($sth)) {
$rows1['data'][] =array(
Date($r['EXTRACT_DATE'],time()),intval($r['COUNT_NB'])
);
}
$rows1['selected'] = true;
$result = array();
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
2 .其次我用了以后无法把日期放在x轴上
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d'
}
},
3 个回复
webkong - js攻城狮
赞同来自: john
也是醉了。 @john的解决办法OK的。
不显示时间轴的问题：
结果集里面的时间格式 xxxx-xx-xx 要在绘制图形的时候转换成UTC时间 。才能被识别显示在chart里面。这就是你那个图为什么没有显示的原因。
这个可以在后端转也可以在前端。
前端JS Date.UTC(年, 月-1, 日)
php就是转换成时间戳格式。
john - 个人微博：http://weibo.com/u/2175683160
赞同来自:
1、请格式化好代码在发帖，针对这个问题，请重新调整帖子的格式
2、前一个帖子说到了，为什么还是用两个接口分别返回 categories 和 series 数据，这是非常不合理甚至是错误的做法。
再说解决办法：
数据统一返回 [时间戳,值] 的形式就行了，x 轴是时间轴时，Highcharts 可以自动合并同一个时间的数据的，也就是
那么显示的效果为：
对应的例子是：http://code.hcharts.cn/hcharts.cn/hhhG36
至于后端怎么返回时间戳及数组数据，相信对于做后端开发的人员来说，这不是难事，这里就不更多说明。
peng8 - 前端攻城师 blog: www.peng8.net
赞同来自:
例如请求的 地址 为 "getdata.php"
在这个action里 将 categories和series的数据拼接成一个json。
返回的格式类似 {categories:[],series:[]}
至于时间的间隔，空白时间的间隔点 可以用null 表示
{categories:[],series:[]}
前端取用的时候
success:function(result){var categories=result.categories;
var series=result.series;
//这上面就是拿到的 2个变量，然后给图表赋值
}