2017-06-18 32 views
0

目前我正在使用angular-nvd3圖形來顯示數據。但是,堆疊面積圖nvd3圖形類型正在切斷數字和軸標籤。模板圖可以查看here。主要關注的是Y軸號碼和標籤。以下是圖表選項代碼和問題的圖像。角度NVD-3圖形:軸標籤和軸號切出和觀察窗外

有沒有辦法縮小尺寸以防止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

+0

您是否嘗試更改剩餘邊距? JSFiddle/Plunkr會有所幫助。 – jeznag

+0

你的權利。我將左邊距從40增加到100.左邊距越高,圖形越小,允許數字和軸標籤查看空間。如果你發佈答案,我可以給你答案的答案。 – JnL

回答

1

嘗試增加margin.left。它將爲y軸值留出空間。