弯角面板内部的弯角零尺寸 [英] angular-chart zero dimensions inside angular-strap panel

问题描述

我正在尝试在引导面板中渲染一个角度图（基于chart.js）。当前，图表在面板内部时根本不会旋转，但在面板外部时会显示。当我在浏览器中查看源代码时，我看到高度和宽度都设置为零。

I'm trying to render an angular-chart (based on chart.js) chart inside a bootstrap panel. Currently the chart does not swho at all when inside the panel but does show when placed outside the panel. When I view the source in the browser I see the height and width are set to zero.

图表未显示

<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中设置高度和宽度，但仍然没有运气。

Not sure where or why the height and width are getting set to zero. I also have tried setting the height and width in css but still have had no luck.

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

我也尝试过调整图表选项

I have also tried adjusting the chart options

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

推荐答案

经过大量实验后，我发现了一种解决方法/破解方法。根据Chart.js github上的一个未解决问题：

After much experimentation I have found a workaround/hack. According to an open issue on the Chart.js github :

如果计算出的$ b $，也会（出于充分的理由）发生此错误b容器的尺寸尚未应用。我通过使用setTimeout（function（）{//图表创建代码}，0）达到了
的水平。

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。

So, it looks like the dimensions of my panel container weren't getting applied until after the chart was rendered. This resulted in a 0px height when the chart tried to inherit from it's parent container.

为解决此问题，我在控制器中添加了一个超时值，并在标记中添加了ng-if因此它会在超时完成后呈现。
在我的控制器中添加了：

To solve this I added a timeout in the controller and a ng-if to the tag so it renders after the timeout completes. In my controller I added :

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

我的HTML现在看起来像：

My HTML now looks like :

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

我还启用了响应选项，只是为了让事情看起来更好...

I also enabled the responsive option just to make things look better...

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

资源：
https://github.com/nnnick/Chart.js/issues/592

这篇关于弯角面板内部的弯角零尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！