угловые диаграммы нулевые размеры внутри панели с угловым ремешком

Question

Я пытаюсь отобразить диаграмму угловой диаграммы (на основе chart.js) внутри панели ботстрапа. В настоящее время диаграмма вообще не работает, когда она находится внутри панели, но отображается, когда она находится за пределами панели. Когда я просматриваю источник в браузере, я вижу, что высота и ширина установлены на ноль.

график не отображает

<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse> 
    <div class="panel panel-default" ng-repeat="experiment in experiments"> 
     <div class="panel-collapse" role="tabpanel" bs-collapse-target> 
     <div class="panel-body"> 
      <canvas id="pie" class="chart chart-pie" data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas> 
     </div> 
     </div> 
    </div> 
</div> 

диаграмма ДЕЛАЕТ дисплей

<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse> 
     <div class="panel panel-default" ng-repeat="experiment in experiments"> 
      <div class="panel-collapse" role="tabpanel" bs-collapse-target> 
      <div class="panel-body"> 
      </div> 
      </div> 
     </div> 
    </div> 
    <canvas id="pie" class="chart chart-pie" data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas> 

Источник Страница:

Не знаете, где и почему высота и ширина становятся установить на ноль. Я также попытался установить высоту и ширину в css, но до сих пор не повезло.

.chart { 
    height: 400px; 
    width: 600px; 
} 
#pie { 
    height: 400px; 
    width: 600px; 
} 

Я также попытался настройки параметров диаграммы

viewCountOptions = { 
    responsive: false, 
    maintainAspectRatio: false 
}; 

Answer 1

После долгих экспериментов я нашел обходной путь/хак. В соответствии с одним открытым вопрос о Chart.js GitHub:

Эта ошибка также (по причине хорошей) возникает, если еще не были применены вычисленные размеры контейнера. Я обошел с помощью setTimeout (function() {// код создания диаграммы}, 0);

Таким образом, размеры моего контейнера панели не применяются до тех пор, пока график не будет отображен. Это привело к росту 0px, когда диаграмма попыталась наследовать его родительский контейнер.

Чтобы решить эту проблему, я добавил тайм-аут в контроллер и ng-if в тег, чтобы он отображался после завершения таймаута. В моем контроллере я добавил:

$timeout(function() { 
    $scope.renderChart= true; 
    console.log('Rendering chart') 
}, 1000); 

Мой HTML теперь выглядит следующим образом:

<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse> 
    <div class="panel panel-default" ng-repeat="experiment in experiments"> 
     <div class="panel-collapse" role="tabpanel" bs-collapse-target> 
     <div class="panel-body"> 
      <canvas ng-if="renderChart" id="pie" class="chart chart-pie" data="viewCountData" labels="viewCountLabels" options="viewCountOptions"></canvas> 
     </div> 
     </div> 
    </div> 
</div> 

Я также включен ответный вариант только, чтобы сделать вещи лучше выглядеть ...

$scope.viewCountOptions = { 
    responsive: true, 
    maintainAspectRatio: false 
}; 

Ресурсов : https://github.com/nnnick/Chart.js/issues/592