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

【问题标题】：Why does my highchart only expand horizontally to fill its containing div, and not vertically?为什么我的 highchart 只水平扩展以填充其包含的 div，而不是垂直扩展？
【发布时间】：2014-07-20 16:49:08
【问题描述】：

Fiddle

我正在使用 highcharts-ng。在上面的 Fiddle 中，我创建了一个最简单的案例来显示我遇到的问题 - 当图表包含在 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]
        }],
    }



});

【问题讨论】：

标签： angularjs highcharts highcharts-ng

【解决方案1】：

如果您未在配置中指定 chart height，highcharts 将：

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

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

看到这个updated fiddle。

【讨论】：

【解决方案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/

【讨论】：