2017-01-09 1 views
1

PlotlyJS을 사용하여 차트를 작성하고 있습니다.JS 플롯 홀수 마진 상단

enter image description here

사람이 어떻게이 문제를 해결하는 방법을 말해 줄래 : 그러나 내 수평 막대 차트 상단에 몇 가지 이상한 패딩/여유가?

기본 값을 코드는

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); 
      }; 
     } 
    } 
}); 
+2

코드없이 도움을 줄 수 없습니까? 그렇습니다. –

+0

@GerardoFurtado il 제 질문에 코드를 추가하십시오 –

답변

2

나는 각도와 경험이 없어하지만 난 당신이 참조 (https://plot.ly/javascript/reference/#layout-margin를) 볼 수 있듯이 당신이 0 에 여백 - 최고 값을 설정해야한다고 생각

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

을 BTW : 어쩌면 지금 modebar-버튼을 각 plotly 그래프의 상단에 표시되지 않습니다 더 이상 layout.margin.t의 80는 그래서 당신의 코드를 변경합니다. 이를 위해서는 t:30 또는 다른 값을 시도해보십시오. 희망 사항 :-)