角度NVD-3图形:在视窗外切断轴标记和轴编号

时间:2017-06-18 18:24:33

标签: javascript angularjs nvd3.js angular-nvd3

目前我正在使用angular-nvd3图形来显示数据。但是,堆积面积图nvd3图形类型正在切断数字和轴标签。可以查看模板图here。 y轴数和标签是主要关注点。下面是图表选项代码和问题的图像。

有没有办法缩小尺寸以防止y轴数字和标签被切断?

$scope.optionsStacked = {
                    chart: {
                        type: 'stackedAreaChart',
                        height: 450,
                        margin : {
                            top: 20,
                            right: 20,
                            bottom: 30,
                            left: 40
                        },
                        x: function(d){return d[0];},
                        y: function(d){return d[1]/100;},
                        useVoronoi: false,
                        clipEdge: true,
                        duration: 100,
                        useInteractiveGuideline: true,
                        xAxis: {
                            axisLabel: 'Time (Years)',
                            axisLabelDistance: -8,
                            showMaxMin: false,
                            tickFormat: function(d) {
                                return d3.time.format('%Y')(new Date(d))
                            },
                            showMaxMin: true
                        },
                        yAxis: {
                            axisLabel: 'arb units',
                            axisLabelDistance: -4,
                            tickFormat: function(d){
                                return d3.format(',.2f')(d);
                            }
                        },
                        zoom: {
                            enabled: true,
                            scaleExtent: [1, 10],
                            useFixedDomain: false,
                            useNiceScale: false,
                            horizontalOff: false,
                            verticalOff: true,
                            unzoomEventType: 'dblclick.zoom'
                        }
                    }
                };

enter image description here

1 个答案:

答案 0 :(得分:1)

尝试增加margin.left。它将为y轴值创造空间。