AmChart 잘게 잘린 레이블

AmCharts를 사용하여 차트를 표시하기위한 지침 설정이 있습니다. Axes에 대한 공간을 포함하여 전체 차트의 너비를 올바르게 계산하지 않아서 축 라벨과 제목이 잘린 상태로 잘 작동합니다. 내 지시문과 결과의 스크린 샷을 첨부했습니다.AmChart 잘게 잘린 레이블

enter image description here

y 축에서 레이블이 있음을 가장 잘 볼 수 있으며 놓치기 쉽습니다. div가로드되는 div의 크기를 변경하면 아무 효과가 없습니다. 크기를 크게하거나 작게하면 크기가 바뀌지 만 트리밍은 여전히 남아 있습니다.

'use strict'; 

angular.module('core').directive('amchart', ['$window', 
function($window) { 
return { 
    template: '<div id="follower-chart" class="amchart" style="height:300px;width:960px;padding:0 15px;"></div>', 
    restrict: 'EA', 
    replace: false, 
    scope: { 
     chartType: '@', 
     chartData: '=' 
    }, 
    link: function postLink(scope, element, attrs) { 

     var chart = false; 

     scope.$watch('chartData',function(data){ 

      if(data) { 

       var id = $window._.uniqueId('chart_'); 
       /*element.attr('id', id); 
       element.css({ 
        height: '260px', 
        width: '870px', 
        padding: '0 0 60px 60px', 
        margin: '0 auto' 
       });*/ 

       console.log(data); 

       chart = new $window.AmCharts.AmSerialChart(); 

       // Data 
       chart.dataProvider = data; 
       chart.categoryField = 'date'; 
       chart.dataDateFormat = 'YYYY-MM-DD'; 
       chart.addClassNames = true; 

       // Axis 
       // Category 
       var categoryAxis = chart.categoryAxis; 
       categoryAxis.labelRotation = 90; 
       categoryAxis.labelOffset = 35; 
       categoryAxis.parseDates = true; 
       categoryAxis.equalSpacing = false; 

       // Value 
       var valueAxis = new $window.AmCharts.ValueAxis(); 
       valueAxis.title = 'Followers'; 
       chart.addValueAxis(valueAxis); 

       // GRAPH 
       var graph = new $window.AmCharts.AmGraph(); 
       graph.id = 'g1'; 
       graph.bullet = 'round'; 
       graph.bulletBorderAlpha = 1; 
       graph.bulletColor = '#FFFFFF'; 
       graph.bulletSize = 5; 
       graph.hideBulletsCount = 50; 
       graph.lineThickness = 2; 
       graph.lineColor = '#1985a1'; 
       graph.title = 'Follower Count'; 
       graph.useLineColorForBulletBorder = true; 
       graph.valueField = 'value'; 

       chart.addGraph(graph); 

       // CURSOR 
       var chartCursor = new $window.AmCharts.ChartCursor(); 
       chartCursor.cursorAlpha = 0; 
       chartCursor.zoomable = false; 
       chartCursor.categoryBalloonEnabled = false; 
       chart.addChartCursor(chartCursor); 

       chart.creditsPosition = 'bottom-right'; 

       // WRITE 
       chart.write('follower-chart'); 

      } 
     }); 
    } 
};

}]); 내가 당신을 위해 작동합니다 희망

chart = AmCharts.makeChart("chartdiv", { 
             "type": "serial", 
             "addClassNames": true, 
             "theme": "light", 
             "autoMargins": true, 
              ... 
             }

출처

2015-01-14 Mark

약간 이상합니다. 차트는 자동으로 여백을 계산해야합니다. chart.autoMargins = false로 설정하고 marginBottom/marginLeft를 수동으로 설정할 수 있습니까? – zeroin

고마워, 그건 제대로 보이게하는 측면에서 효과가 있었지만, 당신이 말한 것처럼 이상하지는 않다. 저는 Angular 밖에서 amCharts와 함께 일 했었고 문제가 없었습니다. 그래서 아마 그 일과 관련이 있습니다. – Mark

는 jQuery를에 내가 (이 같은 사실 "autoMargins")을 사용했다.

출처

2016-03-31 17:25:41 LagMaster

AmChart 잘게 잘린 레이블

답변

관련 문제