javascript - 使用第 3 方插件时包裹 child

Question

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

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

我尝试包装它并将宽度设置为相对宽度，但高度仍然使用 child 的高度而不是父(包装)。

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

JS:

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

截图:

Answer 1

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

Highstock documentation状态:

height : Number

An explicit height for the chart. By default the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

只需添加 100% 的 height 和 width:

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

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

<div id="overallAlerts" style="height: 100%; width: 100%;"></div>