0

我正在尝试在引导面板内呈现角度图表（基于 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
};
4

1 回答 1

0

经过大量实验，我找到了一种解决方法/黑客。根据 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

于 2015-05-12T18:40:57.433 回答