对于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
    });