对于highchart中缺少某一x轴节点数据,从而导致数据前移的问题解决方案
2016-04-19 13:54
531 查看
不得不说,前后端分离确实提高了我们的开发效率,但有的时候,我们以为后端传给我们的数据仅仅是—我们以为,(让我先哭一会~~~~。)
这种情况在我的工作中就遇到过,下面分享粗来供大家参考,
1、首先,希望你能对lodsh.js懂一些,不懂自己google去,很简单。其次就是基本的highchart配置了。
2、highchart 几个基本参数包括
$(’.test-highchart’).highcharts(options);
其中主要有以下参数:
(1)xAxis: {
categories:[],
}
其中categories是x轴坐标数组,
(2)、series: series
其中的series 是一个,对象的样子大概是:
series:[
{ name:’小明’,
data:[1,3,5,7,9,11]
},
{ name:’小华’,
data:[2,4,6,8,10,12]
},
{ name:’小刚’,
data:[2,4,6,8,10,12]
}
]
3、我们就拿每天的测试成绩变化曲线来说明问题。
假设我们获得的数据数这样的
var testData = [{
dt:'20160401',
name:'小华',
grade:123
},{
dt:'20160402',
name:'小华',
grade:456
},{
dt:'20160403',
name:'小华',
grade:111
},{
dt:'20160402',
name:'小明',
grade:222
},{
dt:'20160403',
name:'小明',
grade:247
}
];
其中小华的数据是完整的,而小明由于2016年4月1日没有参加测试,导致数据缺失,如果不做处理在折线图图上则显示小明的2号成绩显示在1号,3号成绩显示在2号,为了解决这个问题我们就需要对缺少的数据进行补全。
重点!!!!!来啦,重点怎么做呢,让我们一起来解决吧。
(1)、首先
var cate =_.pluck(testData,'dt');
cate = _.uniq(cate); //获得x轴的所有坐标,
var nameArr =['小明','小华’]; //需要展示的线的集合,这里进行了简化,也可以是每一个需要展示的线的对象,其中有该线相关的属性。
var series =[]; //声明一个空的表格y轴容器,
_.forEach(nameArr,function(item){ //遍历每一条线的属性,
var ret ={}; //新建一个空的折线对象,其中存放一条折线的折线名name ,绘图数据data:[1,2,3,4,5,6,……]。类型:type: spline等。
ret.name = item; //名字赋值
ret.type = 'spline’; //类型赋值
var lineTemp = _.filter(testData,function(itemData){
return itemData.name === item;
}); //找出该折线名的所有返回值。
var data = []; //新建一个存放绘图数据的对象,
cate.forEach(function(dt){
//查看是否存在该日期
var index = _.findIndex(lineTemp,function(i){
return i.dt === dt;
});
//如果存在赋对应值
if(index !== -1){
data.push(lineTemp[index].val);
}else{
data.push(0); //如果不存在,则以0或null补全该天
}
});
ret.data =data; //将拼接的绘图数据进行赋值
series.push(ret); //放到渲染数组内
});
这样就做到了数据补全功能。
下面贴一下代码:
//折线图
var testData = [{
dt:'20160401',
name:'小华',
val:123
},{
dt:'20160402',
name:'小华',
val:456
},{
dt:'20160403',
name:'小华',
val:111
},{
dt:'20160402',
name:'小明',
val:222
},{
dt:'20160403',
name:'小明',
val:247
}
]
var cate =_.pluck(testData,'dt');
cate = _.uniq(cate);
console.log(cate);
var nameArr =['小明','小华'];
var series =[];
_.forEach(nameArr,function(item){
var ret ={};
ret.name = item;
ret.type = 'spline';
var lineTemp = _.filter(testData,function(itemData){
return itemData.name === item;
});
var data = [];
cate.forEach(function(dt){
//查看是否存在该日期
var index = _.findIndex(lineTemp,function(i){
return i.dt === dt;
});
//如果存在赋对应值
if(index !== -1){
data.push(lineTemp[index].val);
}else{
data.push(0);
}
});
ret.data =data;
series.push(ret);
});
$('.test-data').highcharts({
chart: {
type: "spline",
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
},
zoomType:'xy'
},
title: {
text: '成绩单',
x: -20 ,//center
useHTML:true,
style:{
color:'gold'
}
},
subtitle: {
text: '各同学成绩趋势图',
x: -20
},
xAxis: {
categories:cate,
//gridLineWidth:'1',
//gridLineDashStyle:'Dash',
},
yAxis: {
title: {
text: '温度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared:true,
crosschairs:true,
valueSuffix: '°C',
//backgroundColor: '#FCFFC5', // 背景颜色
//borderColor: 'black', // 边框颜色
borderRadius: 10, // 边框圆角
borderWidth: 3, // 边框宽度
shadow: true, // 是否显示阴影
animation: true, // 是否启用动画效果
style: { // 文字内容相关样式
// color: "#ff0000",
fontSize: "12px",
fontWeight: "blod",
fontFamily: "Courir new"
}
},
legend: {
layout: 'horizontal',
align: 'middle',
verticalAlign: 'bottom',
borderWidth:0,
x: 300,
y: 20
},
series: series
});
这种情况在我的工作中就遇到过,下面分享粗来供大家参考,
1、首先,希望你能对lodsh.js懂一些,不懂自己google去,很简单。其次就是基本的highchart配置了。
2、highchart 几个基本参数包括
$(’.test-highchart’).highcharts(options);
其中主要有以下参数:
(1)xAxis: {
categories:[],
}
其中categories是x轴坐标数组,
(2)、series: series
其中的series 是一个,对象的样子大概是:
series:[
{ name:’小明’,
data:[1,3,5,7,9,11]
},
{ name:’小华’,
data:[2,4,6,8,10,12]
},
{ name:’小刚’,
data:[2,4,6,8,10,12]
}
]
3、我们就拿每天的测试成绩变化曲线来说明问题。
假设我们获得的数据数这样的
var testData = [{
dt:'20160401',
name:'小华',
grade:123
},{
dt:'20160402',
name:'小华',
grade:456
},{
dt:'20160403',
name:'小华',
grade:111
},{
dt:'20160402',
name:'小明',
grade:222
},{
dt:'20160403',
name:'小明',
grade:247
}
];
其中小华的数据是完整的,而小明由于2016年4月1日没有参加测试,导致数据缺失,如果不做处理在折线图图上则显示小明的2号成绩显示在1号,3号成绩显示在2号,为了解决这个问题我们就需要对缺少的数据进行补全。
重点!!!!!来啦,重点怎么做呢,让我们一起来解决吧。
(1)、首先
var cate =_.pluck(testData,'dt');
cate = _.uniq(cate); //获得x轴的所有坐标,
var nameArr =['小明','小华’]; //需要展示的线的集合,这里进行了简化,也可以是每一个需要展示的线的对象,其中有该线相关的属性。
var series =[]; //声明一个空的表格y轴容器,
_.forEach(nameArr,function(item){ //遍历每一条线的属性,
var ret ={}; //新建一个空的折线对象,其中存放一条折线的折线名name ,绘图数据data:[1,2,3,4,5,6,……]。类型:type: spline等。
ret.name = item; //名字赋值
ret.type = 'spline’; //类型赋值
var lineTemp = _.filter(testData,function(itemData){
return itemData.name === item;
}); //找出该折线名的所有返回值。
var data = []; //新建一个存放绘图数据的对象,
cate.forEach(function(dt){
//查看是否存在该日期
var index = _.findIndex(lineTemp,function(i){
return i.dt === dt;
});
//如果存在赋对应值
if(index !== -1){
data.push(lineTemp[index].val);
}else{
data.push(0); //如果不存在,则以0或null补全该天
}
});
ret.data =data; //将拼接的绘图数据进行赋值
series.push(ret); //放到渲染数组内
});
这样就做到了数据补全功能。
下面贴一下代码:
//折线图
var testData = [{
dt:'20160401',
name:'小华',
val:123
},{
dt:'20160402',
name:'小华',
val:456
},{
dt:'20160403',
name:'小华',
val:111
},{
dt:'20160402',
name:'小明',
val:222
},{
dt:'20160403',
name:'小明',
val:247
}
]
var cate =_.pluck(testData,'dt');
cate = _.uniq(cate);
console.log(cate);
var nameArr =['小明','小华'];
var series =[];
_.forEach(nameArr,function(item){
var ret ={};
ret.name = item;
ret.type = 'spline';
var lineTemp = _.filter(testData,function(itemData){
return itemData.name === item;
});
var data = [];
cate.forEach(function(dt){
//查看是否存在该日期
var index = _.findIndex(lineTemp,function(i){
return i.dt === dt;
});
//如果存在赋对应值
if(index !== -1){
data.push(lineTemp[index].val);
}else{
data.push(0);
}
});
ret.data =data;
series.push(ret);
});
$('.test-data').highcharts({
chart: {
type: "spline",
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
},
zoomType:'xy'
},
title: {
text: '成绩单',
x: -20 ,//center
useHTML:true,
style:{
color:'gold'
}
},
subtitle: {
text: '各同学成绩趋势图',
x: -20
},
xAxis: {
categories:cate,
//gridLineWidth:'1',
//gridLineDashStyle:'Dash',
},
yAxis: {
title: {
text: '温度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared:true,
crosschairs:true,
valueSuffix: '°C',
//backgroundColor: '#FCFFC5', // 背景颜色
//borderColor: 'black', // 边框颜色
borderRadius: 10, // 边框圆角
borderWidth: 3, // 边框宽度
shadow: true, // 是否显示阴影
animation: true, // 是否启用动画效果
style: { // 文字内容相关样式
// color: "#ff0000",
fontSize: "12px",
fontWeight: "blod",
fontFamily: "Courir new"
}
},
legend: {
layout: 'horizontal',
align: 'middle',
verticalAlign: 'bottom',
borderWidth:0,
x: 300,
y: 20
},
series: series
});
相关文章推荐