Javascript 角度图表角度带面板内部的零尺寸

我试图在引导面板中呈现一个角度图（基于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>

我还尝试过调整图表选项

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

---

经过多次试验，我找到了一种解决方法。根据Chart.js github上的一个公开问题：

如果计算出 容器的尺寸尚未应用。我四处走动 这是通过使用setTimeout（函数（）{//图表创建代码}，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>

资源：

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