angular-nvd3指令对nvd3的封装导致的xAxis坐标对应Dots不整齐的自定义修复

来源：互联网发布：c语言两竖怎么打编辑：程序博客网时间：2024/05/22 02:21

修复点在xAxis property的tickValues函数上面：

tickValues:function(data, p){                        var MAX_LIMIT = 5;                        if(data && data[0] && data[0].values && data[0].values.length > 0){                            var values = data[0].values;                            var lastIndex = values.length - 1;                            var ticks = [];                            if( lastIndex <= MAX_LIMIT ){                                angular.forEach(values,function(o){                                    ticks.push(o.x)                                });                            } else {                                var dataPointDistance = values[1].x - values[0].x;                                var pointsStep = ( values[lastIndex].x - values[0].x ) ;                                var step = pointsStep / dataPointDistance                                step = ( step + 1 ) / MAX_LIMIT;                                var index = 0;                                for(var mark = 0; mark < MAX_LIMIT - 1; mark++ ) {                                    index = index + step;                                    ticks.push(values[index].x);                                }                                ticks.push(values[lastIndex].x);                            }                            console.info(ticks)                            return ticks;                        }                                        }

improvement:

tickValues:function(data, p){                        var MAX_LIMIT = 10;                        if(data && data[0] && data[0].values && data[0].values.length > 0){                            var values = data[0].values;                            var lastIndex = values.length - 1;                            var ticks = [];                            if( lastIndex <= MAX_LIMIT ){                                angular.forEach(values,function(o){                                    ticks.push(o.x)                                });                            } else {                                var xStep = values[1].x - values[0].x;                                var xSpanNeeded = Math.floor(( values[lastIndex].x - values[0].x ) / ( MAX_LIMIT - 1));                                var stepForLoop = Math.floor(xSpanNeeded / xStep);                                var indexCount = 0;                                var test = [];                                for(var count = 0; count < MAX_LIMIT-1; count++) {                                indexCount = indexCount + stepForLoop;                                ticks.push( values[indexCount].x);                                test.push(new Date(values[indexCount].x));                                }                                //ticks.push(values[lastIndex].x);                            }                            console.info(ticks,test)                            return ticks;                        }

Better Solution :

xScale: d3.time.scale().nice(d3.time.hour)

above property is paralleled with xAxis property.

0 0