使用第3方插件时包裹孩子

Question

我正在使用highcharts插件来创建图表。

我的问题是我想以相对的方式设置高度和宽度。

我尝试将其包装并将宽度设置为相对宽度，但高度仍然使用子高度，而不是父级（包装器）。

<div style="width:60vw; height:40vh">
     <div id="overallAlerts"></div>
</div>

JS：

window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'overallAlerts'
        },
.....

截图：

Answer 1

问题可能是您没有在子元素上定义任何高度，强制图表恢复为默认值。

Highstock documentation州：

  

身高：数字

     

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

只需添加height的{​​{1}}和width：

100%

或者，如果你真的坚持使用内联样式：

#overallAlerts {
  height: 100%;
  width: 100%;
}