angular-图表 angular-表带面板内的零尺寸

Question

我正在尝试在 bootstrap 面板中呈现 angular 图表（基于 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

经过多次试验，我找到了 workaround/hack。根据 Chart.js github 上的未解决问题：

This error will also (for good reason) occur if the computed dimensions of the container haven't yet been applied. I got around this by using setTimeout(function () { // chart creation code }, 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

angular-图表 angular-表带面板内的零尺寸

angular-chart zero dimensions inside angular-strap panel

javascript

angular-strap

chart.js

angular-chart