Plotly圖表區域切斷文本

Question

我有以下plotly代碼：

  var element = document.getElementById(scope.changeid); 

     function getData(division,redraw) { 
      var employeeData = []; 
      if (!division) { 
       $http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) { 
        processData(response,redraw); 
       }); 
      } 
      else { 
       $http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) { 
        processData(response,redraw); 
       }) 
      } 

     } 

     function processData(data,redraw) { 
      var y = [], 
       x1 = [], 
       x2 = []; 

      data.forEach(function (item) { 
       y.push(item.user.profile.firstname); 
       x1.push(item.current_level); 
       x2.push(item.expected); 
      }); 

      var charData = [{ 
        x: y, 
        y: x1, 
        type: 'bar', 

        name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'), 
        marker: { 
         color: '#23b7e5' 
        } 
       }, { 
        x:y, 
        y:x2, 
        type: 'bar', 
        marker: { 
         color: '#f05050' 
        }, 
        name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED') 
       }], 
       layout = { 
        title: $filter('translate')('USERMANAGEMENT.USERS'), 
        barmode: 'stack', 
        legend: { 
         traceorder: 'reversed' 

        } 
       }; 

      Plotly.newPlot(element,charData,layout); 
     } 

     scope.$watch('divisionId', function (newValue, oldValue) { 
      if (newValue) { 
       getData(newValue.id,true); 
      } 
     }, true); 

     getData(null,false); 

這會產生如下圖：

      <div class="panel-body"> 
          <h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4> 
          <vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails" 
               changeid="chartArea" xcolumn="xColumn" y-column="yColumn" 
               dataset="dataSet" 
               has-addition="true" 
               style="width: 80%; text-align: center"></vertical-bar-chart> 
         </div> 

正如你或許可以告訴文本（x列）正被無意中斷。所以我的問題是我如何避免這種情況？我試圖增加元素的高度，但沒有任何運氣:(

，你可以在這裏看到：

（哦，你不能說，因爲白色背景，但面板的高度身體是1000像素然而它仍然砍下。）

Answer 1

嘗試在plotlyjs reference page增加layout.margin.b（詳細信息下邊距。

Answer 2

僅供參考，我有同樣的問題，瑪格在底部沒有幫助，而圖形創建後，我跑到下面的JQuery它揭示了隱藏的文本：

var heightincrease = $('#yourID').find('.svg-container').height() + 100; 
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease); 

按要求透露你的整個圖形顯然調整。如果這是一個問題，可能會打破調整大小，所以需要工作。