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); 

按要求透露你的整个图形显然调整。如果这是一个问题，可能会打破调整大小，所以需要工作。