Angularjs 차트의 크기가 조정되지 않습니다.

Question

저는 angularjs를 사용하는 작은 webapp를 가지고 있는데 angularJS library에서 두 개의 차트를 고소하려고합니다. 나는 술집과 파이를 사용하고 있습니다. 그들은 잘 렌더링하고 있지만 디스플레이가 작아 지거나 더 커지면 어떤 이유로 크기를 조정하지 않습니다.

내 HTML 코드 :

.chartWrapper{ 
    margin: 0 auto; 
    text-align: center; 
    vertical-align: top; 
    width: 80% !important; 
} 

내 자바 스크립트 코드

angular.module('app') 
.config(['ChartJsProvider', function (ChartJsProvider) { 
    // Configure all charts 
    ChartJsProvider.setOptions({ 
    colours: ['#FF0000', '#0000FF'], 
    responsive: true 
    }); 
    // Configure all pie charts 
    ChartJsProvider.setOptions('Pie', { 
    datasetFill: true, 
    chartLegend: true 
    }); 
    // Configure all bar charts 
    ChartJsProvider.setOptions('Bar', { 
    datasetFill: true, 
    chartLegend: true 
    }); 
}]) 
.controller('mainCtrl', function($scope){ 
    var main = this; 
    $scope.answered = answered; 
    $scope.quAnswered = false; 

    $scope.pieData = [30,50]; 
    $scope.chartData = [[30,60],[50,20]]; 
    $scope.chartLabels = [ 'Female', 'Male']; 
    $scope.series = ['Pepsi', 'Coca-Cola']; 

    Chart.defaults.global.responsive = true; 

    function answered(){ 

    } 



}) 

Answer 1

당신이 무엇을 의미합니까 랩퍼

<div class="chartWrapper" ng-show="true" layout="row" layout-align="center center" md-whiteframe="3"> 
    <canvas id="pie" class="chart chart-pie" chart-data="pieData" chart-labels="chartLabels" chart-legend="true"></canvas> 
    <canvas id="bar" class="chart chart-bar" chart-data="chartData" chart-legend="true" chart-labels="chartLabels" chart-series="series"></canvas> 
</div> 

내 CSS 코드 "디스플레이 작거나 큰 수" ? 상위 컨테이너 만 크기를 조정하면 Chart.js 라이브러리가 윈도우 크기 조정 이벤트를 수신 할 수 있으므로 차트의 크기가 조정되지 않습니다 (다른 크기 조정 이벤트는 수신 할 수 없음).

최신 버전에서는 scope에 $resize 이벤트를 발생시켜 부모 컨테이너 창 크기를 프로그래밍 방식으로 조정하면 크기 조정 이벤트가 트리거 될 수 있습니다. https://github.com/jtblin/angular-chart.js/#events