highcharts因为数据库中的日期不连续导致的数据错位该如何解决?

不好意思,又来问问题,因为最近在做学校的这个项目,然后对highcharts又不是很了解,所以有很多很基础的问题想请大家帮忙,还麻烦大家帮我详细解释一下。

我想利用数据库的数据画多条折线图,我的情况是我用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]

series.PNG





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]


cat.PNG


4 部分数据库格式

sql.PNG


5 时间错位错误的折线图

wrong.PNG


6 正确的折线图应该是


right.PNG


续上面的问题
我根据回答修改了代码,首先先把两个后台合并成一个
现在的问题是:
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);
?>


data.PNG


2 .其次我用了以后无法把日期放在x轴上

schema2.PNG
   xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d'
}
},









 
已邀请:

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 可以自动合并同一个时间的数据的,也就是
series: [{
name: 'series',
data: [
[new Date('2015-09-01').getTime(), 20],
[new Date('2015-09-02').getTime(), 40],
[new Date('2015-09-06').getTime(), 80]
]
},{
name: 'series 2',
data: [
[new Date('2015-09-01').getTime(), 20],
[new Date('2015-09-04').getTime(), 50],
[new Date('2015-09-04').getTime(), 50]
]
}]

那么显示的效果为:

Snip20151109_14.png


对应的例子是: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个变量,然后给图表赋值
}

要回复问题请先登录注册