引导选项卡中的高图:在窗口调整大小时不可见的图表中断

Highcharts in Bootstrap tabs: non-visible chart breaks on window resize?

本文关键字：小时 中断 调整 窗口 选项 高图      更新时间：2023-09-26

我在单独的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>

问题主要来自用于隐藏选项卡内容的引导程序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; 
}
相关文章：