Question

我一直在试图找出如何准确地使我的Highcharts图表在加载和窗口大小调整时具有动态宽度。我的问题不仅是我将图表放在隐藏的选项卡中，而且父div的宽度为100％。图表在调整大小时没有响应，并且最初没有正确加载。

基本校长在这里：http://jsfiddle.net/chapster82/c5teh97h/1/

CSS

.content2 {
  display: none;
}
#wrap {
  width: 400px;
  position: relative;
  border: solid 1px #333;
}
#container {
  height:100%;
  width:100%;
}

HTML

<a class="tabs" divId="content1">Content1</a>
<a class="tabs" divId="content2">Content2</a>
<div id="wrap">
<div class="content1 hide">Tab1</div> 
<div class="content2 hide"><div id="container"></div></div>

任何帮助都将不胜感激。

由于

Answer 1

我没有正确理解你的问题。但这个小提琴可能对你有帮助：

http://jsfiddle.net/c5teh97h/6/

.content2 {
   display: none;
}
#wrap {
   width: 80%;
   position: absolute;
   border: solid 1px #333;
}
#container {
   height:80%;
   width:80%;
}

Answer 2

在隐藏选项卡中，隐藏选项卡元素的宽度始终未知。因此，如果要在隐藏选项卡上绘制图表，则需要先获取选项卡的宽度，然后将其分配给高级图表。

//chart options
var options = {
    chart: {
        renderTo: 'container',
        **width: $("#tabs div.ui-tabs-panel[aria-hidden='false']").width()**,
    },

隐藏选项卡上的Highcharts动态宽度

2 个答案: