当前位置: 首页 > 工具软件 > NVD3 > 使用案例 >

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

范弘亮
2023-12-01

修复点在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.


 类似资料: