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

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

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

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

请参阅此updated fiddle。

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/

为什么我的高图仅水平扩展以填充其包含的div，而不是垂直？

2 个答案: