角度配置面板內的角度圖零度尺寸

我試圖呈現引導面板內的角度圖（基於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 
};

來源

2015-05-12 Fabian

多次實驗後，我已經找到了解決方法/黑客。據有關chart.js之github上的懸而未決的問題：

如果尚未應用於容器的計算尺寸也將（有很好的理由）出現此錯誤。我通過使用setTimeout（function（）{// chart creation code}，0）得到了這個;

所以，它看起來像我的面板容器的尺寸直到圖表呈現後纔得到應用。當圖表試圖從它的父容器繼承時，這導致了0px的高度。

爲了解決這個問題，我在控制器中添加了一個超時值，並且在超時完成之後，如果是標記，它會呈現ng。在我的控制器我說：

$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-12 18:40:57 Fabian

角度配置面板內的角度圖零度尺寸

回答

相關問題