JS奇妙なマージントップ

Question

私はPlotlyJSを使って私のチャートを作っています。しかし、私の横棒グラフは、上にいくつかの奇妙なパディング/マージンを持っています

誰もがこの問題を解決する方法を教えてもらえますか？

CODE

angular.module('Chart').directive('advancedChart', function (seriesGenerator) { 
    return { 
     restrict: 'E', 
     template: '<div> </div>', 
     scope: { 
      chartData: '=', 
      valueKey: '@', 
      labelKey: '@', 
      orientation: '@', 
      seriesType: '@', 
      shapes: '=', 
      customSeries: '=', 
      seriesKey: '@', 
      labelFilter: '@', 
      labelGroup: '@', 
      callback: '=', 
      customSize: '=' 
     }, 
     replace: true, 
     link: function (scope, element, attr) { 
      var plotElement = element[0]; 
      var myPlot = document.getElementById('uniqueId'); 
      var layout = {}; 

      if (scope.customSize) { 
       var height = scope.chartData.length * 50; 
       layout = { 
        height: height 
       } 
      } 

      if (!scope.orientation) { 
       scope.orientation = 'v'; 
      } 

      if (!scope.seriesKey) { 
       scope.seriesKey = scope.labelKey; 
      } 

      seriesGenerator.generateAdvancedPlotlySeries(scope.chartData, scope.labelKey, scope.valueKey, scope.seriesType, scope.orientation, scope.seriesKey, scope.labelFilter, scope.labelGroup) 
       .then(function (result) { 
        if (scope.shapes) { 
         layout.shapes = scope.shapes; 
        } 
        layout.margin = { 
         l:250, 
        }; 
        layout.showlegend = false; 

        if (scope.customSeries) { 
         result = result.concat(scope.customSeries); 
        } 

        createChart(result); 
       }); 

      function createChart(charData) { 
       Plotly.newPlot(plotElement, charData, layout); 

       plotElement.on('plotly_click', function (data) { 
        if (scope.callback != null) { 
         var returnData = { 
          y: data.points[0].y, 
          x: data.points[0].x 
         }; 
         scope.callback(returnData); 
        } 
        console.log('y: ' + data.points[0].y + ' ' + 'x:' + data.points[0].x); 
       }); 
      } 

      window.onresize = function() { 
       var update = { 
        width: element.parent().width(); 
       }; 
       Plotly.relayout(plotElement, update); 
      }; 
     } 
    } 
}); 

Answer 1

私は角の経験を持っていないが、私は、あなたが参照（https://plot.ly/javascript/reference/#layout-margin）にデフォルト値を見ることができるようにあなたは0 にマージントップ値を設定すべきだと思います

layout.margin = { 
    l:250, 
    t:0 
}; 

をところで：多分今modebar-ボタンを各plotlyグラフの上に表示されていないもうlayout.margin.tの80は、だからそれにあなたのコードを変更しています。そのためには、t:30または他の値を試してみてください。 希望することができます:-)