javascript - 设置 Bootstrap 面板大小 100% + Highcharts 内容

Question

我正在努力在三台电视中使用 Highcharts 库显示图表。

所有电视的分辨率均为全高清 (1920 x 1080)。

我在 panel-body 中有一个带有图形的 Bootstrap 面板。

<div class="panel panel-blue">
    <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw fa-2x">Graph 1</i>
    </div>
    <div class="panel-body">
        <div id="graph1"></div>
    </div>
</div>

问题是图表调整宽度，我想动态调整高度为100%，如“FULLSCREEN”我可以在 Highcharts 中将图形高度和宽度设置为

chart: {
    renderTo: 'graph1',
    type: 'bar',
    events: {},
    width: 1920,
    height: 1080,
},

但这不能正常工作..有谁能够帮助我？谢谢

Answer 1

只需在 CSS 中使用百分比值即可:

#graph1 {
  height:100%;
}

考虑到.panel-body具有固定高度。

然后，如果您必须提供以磅为单位的高度，请执行以下操作:

var graphHeight = $('#graph1').height()

//or

var graphHeight = document.getElementById('graph1').clientHeight;

chart: {
    renderTo: 'graph1',
    type: 'bar',
    events: {},
    width: 1920,
    height: graphHeight,
},