对于highchart中缺少某一x轴节点数据，从而导致数据前移的问题解决方案

不得不说，前后端分离确实提高了我们的开发效率，但有的时候，我们以为后端传给我们的数据仅仅是—我们以为，（让我先哭一会~~~~。）
这种情况在我的工作中就遇到过，下面分享粗来供大家参考，
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
});