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>

チャート DOES 表示

    <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 に答える