bootstrap tab頁簽插件顯示charts圖表問題，激活的頁簽圖表顯示沒問題，非激活的頁簽圖表顯示有問題

解決這個問題很簡單，只需要在頁簽切換的事件中把圖表\color{red}{重新渲染}就可以了。

1.bootstrap tab頁簽代碼如下

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#container1" role="tab">頁簽1</a></li>
    <li><a href="#container2" role="tab">頁簽2</a></li>
    <li><a href="#container3" role="tab">頁簽3</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content" style="display: flex; min-height: 290px;">
    <div id="container1" class="tab-pane  in active" style="width: 100%;max-height:290px;">
    </div>
    <div id="container2" class="tab-pane  " style="width: 100%;max-height:290px;">
    </div>
    <div id="container3" class="tab-pane " style="width: 100%;max-height:290px;">
    </div>
</div>

2.頁簽切換事件代碼

$('a[role="tab"]').on('shown.bs.tab', function (e) {   //role="tab" 就是上面的超鏈接的屬性
     //target得到的就是上面選項卡面板的div的id,比如說切換到第2個頁簽，target為#container2
     var target = $(this).attr('href');              
     $(target).highcharts().reflow();  //重新渲染，這是highcharts方法
     $(target).resize();   //這是echarts方法
});
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容