Question

我正在尝试在引导程序面板中呈现角度图表（基于chart.js）图表。目前，图表在面板内部时根本没有swho，但是当放置在面板外时确实显示。当我在浏览器中查看源代码时，我看到高度和宽度都设置为零。

图表无法显示

<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

角形带面板内的角度图零点尺寸

1 个答案: