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