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>

问题是使用Width进行图表调整，我希望动态调整height为100%，例如'FULLSCREEN' 我可以将Highcharts中的图形height和width设置为

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,
},

设置Bootstrap面板大小100％+ Highcharts内容

1 个答案: