Angularjsグラフのサイズが変更されていません

Question

私はangularjsを使用して小さなwebappを持っており、angularJS libraryから2つのチャートを訴えようとしています。私はバーとパイを使用しています。彼らはうまくレンダリングしていますが、何らかの理由でディスプレイのサイズが小さくなったり大きくなったりするのを拒否します。

私のHTMLコード：

<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コード

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

私のJavascriptのコード

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

あなたは何を意味するか "の表示は、小さな取得したり、大きな" ？親コンテナのみがサイズ変更された場合、Chart.jsライブラリはウィンドウのサイズ変更イベントを聴くことができるため、チャートのサイズは変更されません（リッスンできる他のサイズ変更イベントはありません）。

scopeに$resizeイベントを送出することで、親コンテナウィンドウのサイズをプログラムで変更した場合、最新のバージョンではサイズ変更イベントが発生します。 https://github.com/jtblin/angular-chart.js/#events