Question

我在单独的Bootstrap选项卡中有两个Highcharts图表。它们最初呈现完美，但是当我调整窗口大小时，不可见的图表会中断。

以下是问题的演示 - 要查看错误，请调整窗口大小，然后点击不可见的标签：http://jsfiddle.net/0hw3zk5t/6/

这是我的HTML（只是因为SO希望我包含一些代码，但您可能不想要数百行Highcharts配置选项）：

<ul id="tabs" class="nav nav-tabs" role="tablist">
  <li role="presentation" id="summary-tab" class="summary-tab active">
    <a href="#summary-panel" aria-controls="settings" role="tab" data-toggle="tab">Show summary</a>
  </li>
  <li role="presentation" id="chart-tab" class="chart-tab">
    <a href="#chart-panel" aria-controls="settings" role="tab" data-toggle="tab">Show over time</a>
  </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="summary-panel" class="summary-tab">
      <div class="chart-container">
      <div id="summarychart"></div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="chart-panel" class="chart-tab">
        <div class="chart-container">
            <div id="chart"></div>
        </div>
    </div>
</div>

Answer 1

问题基本上来自用于隐藏标签内容的boostrap display:none。当图表被强制化时，图表会失去宽度。那么以下css的作用是避免display：none并让内容自动调整。

#tabs {
  width: 100%;
}
#tabs li {
  width: 25%;
}
.tab-pane {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.tab-pane.active {

  background: white;
  min-height: 300px;
}
.tab-pane .chart-title-wrapper {
  text-align: center;
}
.highcharts-container {
  width:100% !important;
  height:100% !important;
}
.chart-container {
  overflow: hidden;
  background: white;
  width: 100%;
}
#chart, #summarychart {
    width: 100%;

}
.tab-content > .active,
.pill-content > .active {
    height: auto;      
} 
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;         
    overflow-y: hidden; 
}

Bootstrap选项卡中的Highcharts：窗口调整大小时不可见的图表中断？

1 个答案: