Angularjs圖表不調整大小

我有一個小型web應用程序使用angularjs，我試圖起訴angularJS library兩個圖表。我正在使用酒吧和派。他們渲染得很好，但由於某些原因，他們拒絕調整顯示器變小或變大。Angularjs圖表不調整大小

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

我對包裝

.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(){ 

    } 



})

來源

2016-06-11 Brennan

您可以添加[plunker]（https://plnkr.co/edit）鏈接嗎？ –

你說的平均CSS代碼「顯示得小或更大」？如果只有父容器調整大小，則圖表不會調整大小，因爲Chart.js庫只能偵聽窗口大小調整事件（不存在可以偵聽的其他調整大小事件）。

在最新版本中，如果通過在scope上發出$resize事件以編程方式調整父容器窗口的大小，可以觸發調整大小事件。請參閱https://github.com/jtblin/angular-chart.js/#events

來源

2016-06-20 06:57:47 jtblin

該鏈接似乎已死亡。你有任何新的內容鏈接？ –

現在只需使用主人。更改鏈接。 – jtblin

Angularjs圖表不調整大小

回答

相關問題