Angularjs Charts werden nicht skaliert

Question

Ich habe eine kleine Webapp mit angularjs und ich versuche, zwei Diagramme aus der angularJS library zu verklagen. Ich benutze eine Bar und einen Kuchen. Sie sind in Ordnung, aber aus irgendeinem Grund weigern sie sich, die Größe zu ändern, wenn die Anzeige kleiner oder größer wird.

Mein HTML-Code:

<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> 

meine CSS-Code für Wrapper

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

Mein Javascript-Code

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

Was verstehen Sie unter dem Mittelwert "Anzeige erhalten kleine oder größere" ? Wenn nur die Größe des übergeordneten Containers geändert wird, wird die Größe des Diagramms nicht geändert, da die Chart.js-Bibliothek nur das Fenster resize-Ereignis abhören kann (es gibt kein anderes resize-Ereignis, das angehört werden kann).

In der neuesten Version können Sie ein Größenanpassungsereignis auslösen, wenn Sie das übergeordnete Containerfenster programmgesteuert ändern, indem Sie ein $resize-Ereignis auf scope ausgeben. Siehe https://github.com/jtblin/angular-chart.js/#events