使用第 3 方插件时换行 child

Question

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

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

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

<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.

简单地添加 height 和 width of 100%:

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

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

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

使用第 3 方插件时换行 child

Wrap child when using 3th party plugin

javascript

html

css

highcharts