為什么div不采用全角或100％寬度？

Question

我正在嘗試制作表格和圖表。 當我同時顯示兩者時，兩者的寬度均為100％。 請全屏檢查。 但是，當我應用ng-show條件時，為什么圖表未以100％的寬度顯示？ 僅顯示寬度的50％到60％。

• 請檢查全屏並單擊顯示圖表按鈕。然后它將僅顯示50％的寬度..我應該以100％的比例顯示。

這是我的代碼http://plnkr.co/edit/lXM2UbYUeT8NSkDeYCgb?p=preview

$scope.isshowTable = true;
$scope.showChart = function() {
    $scope.isshowTable = false;
}
$scope.showTable = function() {
    $scope.isshowTable = true;
}

Answer 1

只需更改圖表指令樣式，即width =“ 100％”，圖表將默認使用寬度。

http://plnkr.co/edit/HkAD1eyD1QGHIUyU7uml?p=preview

<chart value="basicAreaChart" type="area" height="400" style="width:100%"></chart>

這就是為什么， http://api.highcharts.com/highcharts#chart.width

width：數字圖表的顯式寬度。 默認情況下，寬度是根據包含元素的偏移寬度計算的。 試試吧：

800px寬

Answer 2

我認為這是因為您從一開始就啟動了圖表，而$ scope.showChart只是確定圖表是否顯示。

啟動圖表后，它將基於當前寬度。

解決方案之一是在$ scope.showChart上再次啟動圖表。

PS：有趣的是，如果在顯示圖表時更改了框的寬度，它將再次變為100％的寬度。 可能是由於圖表庫中的響應式CSS。