更改col-size时重新缩放Angular Chart.js

Question

我目前正在使用angular.js和angular-chart.js处理仪表板。我喜欢显示X-number of chart.js图表​​（通过点击＆＃34;添加图表＆＃34; - 按钮添加），并希望为每行设置图表的Y值（必须在1-4之间） （通过下拉列表选择，对于此示例Y = 4）。看下面的图片（不太漂亮，我知道..）：

这是有效的，但问题是从Y值改变时。例如：当Y = 4到Y = 1时，它看起来像这样： 单击下拉列表时如何正确缩放图表？

这是我的代码：

HTML

<div class="row">
    <div class="col-md-2">
        <button type="button" class='btn btn-default biggerbutton add-chart-button' ng-click="addChart()"> Add Chart </button>
    </div>
    <div class="col-md-3">
        <div class="btn-group">
            <a class="btn btn-default">{{graphPrRow.text}}</a>
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></a>
            <ul class="dropdown-menu" >
                <li ng-repeat="op in graphPrRow.options" ng-click="clickDropdownGraphsPrRow(); graphPrRow.selected = op.col_size"><a>{{op.value}}</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-7"></div>
</div>
<div class="row">
    <div ng-class="graphPrRow.selected" ng-repeat="chart in charts">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="row>
                         <canvas id="chart.id" class="chart chart-line" chart-data="chart.data" chart-labels="chart.labels" chart-legend="true" chart-series="chart.series" chart-options="chart.options"</canvas>  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

canvas {
    height: 100% !important;
    width: 100% !important;
}

JS

$scope.graphPrRow = { selected: "", options: [{value: 1, col_size: "col-md-12"}, {value: 2, col_size: "col-md-6"}, {value: 3, col_size: "col-md-4"}, {value: 4, col_size: "col-md-3"}], text: 'to be written.. ' };

$scope.addChart = function () {
    chartId ++;
    $timeout(function() {
        $scope.charts.push({ id: chartId, labels: label, series: [], data: [], options: { animation: false, responsive: true, maintainAspectRatio: false } });
    });
};

$scope.clickDropdownGraphsPrRow = function () {
    //TODO
};