angularjs - 为什么我的 highchart 只水平扩展以填充其包含的 div，而不是垂直扩展？

Question

小提琴

我正在使用 highcharts-ng。在上面的小提琴中，我创建了一个最简单的案例来显示我遇到的问题 - 当图表包含在 div 中时，它会水平扩展以填充它，而不是垂直扩展。

为什么是这样？有没有办法让它也垂直扩展？

所以不会让我在没有代码的情况下发布这个，所以这就是上面小提琴中的内容：

html:

<div ng-app="myapp">
<div ng-controller="myctrl">
    <div id="chartContainer" >
        <highchart id="chart1" config="chartConfig"></highchart>
    </div>
</div>

CSS：

#chartContainer {
background-color: #AF3456;
width:777px;
height:500px;
padding:10px;

}

JavaScript：

    //See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.chartConfig = {
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
    }



});

Answer 1

如果您未在配置中指定图表高度，highcharts 将：

默认情况下，高度是根据包含元素的偏移高度计算的，如果包含元素的高度为 0，则为 400 像素。

在您的情况下，您的“包含元素”是<highchart id="chart1"...(not <div id="chartContainer" >) 并且因为它的高度为 0，所以 highchart 使用 400 像素。

看到这个更新的小提琴。

Answer 2

也许更好的是使用正确的 CSS 样式。

body, html {border: 0px; margin: 0px; padding: 0px; 
height:100%; position:relative; width:100%;}

#chart-wrapper,#chart-wrapper div {
    float:left;
    height:100%;
    width:100%;
}
#chartContainer {
    background-color: #AF3456;
    width:97%!important;
    height:97%!important;
    padding:1%;
    float:left;
}

http://jsfiddle.net/W8xsY/7/