ブートストラップタブ内のハイチャートグラフが正しく表示されない

タブ1とタブ2の2つのタブがあります。ページが最初にロードされたときに、最初のタブのグラフが同時にロードされます（col-md-6、今、私がタブ2をクリックすると、そのタブのグラフが最初のもののほぼ半分に崩れてしまいます。また、col-md-6に収まるようにしたいのですが、何か間違っていますか？ブートストラップタブ内のハイチャートグラフが正しく表示されない

ください

は、この jsfiddle

出典

2016-08-03 Bilal Ahmed

参照[この質問]（http://stackoverflow.com/questions/17206631/why-are-bootstrap-タブの表示 - タブ区画 - divs-with-incorrect-widths - 使用時）。ブラウザが隠し要素を計算しない隠された要素の幅によって引き起こされます。 –

@PawełFus私はryenusの答えを読んだが、ブラウザウィンドウのサイズを変更してもまだ問題は残っている。 –

私のソリューションも試してみてください。たとえば、 '最初にチャートをレンダリングしますが、タブをクリックした後はchart.reflow（）'をクリックしてください。 –

使用このjqueryのタブ選択機能を見て、それはあなたの問題を解決します。

here is modified fiddle click here

jQuery(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event 
    jQuery("#graph-container-gray, #graph-container-red").each(function() { 
     var chart = jQuery(this).highcharts(); // target the chart itself 
     chart.reflow() // reflow that chart 
    }); 
})

出典

2016-08-03 11:51:29

あなたのフィドルにはまだ問題があります。結果ペインだけを残して確認してください – ganesshkumar

ブラウザウィンドウのサイズを小さくしてからページをリフレッシュすると、モバイルビューやタブレットビューが必要になりますが、問題はまだ残りますが、 'min-width：94 ％ 'はまだ解決策ではなく、ウィンドウのサイズを変更してからタブを切り替えると、違いがあります。 –

私は私の答えを更新しましたこのフィドルを参照してくださいhttps://jsfiddle.net/r9dt5j4n/6/ –

このフィドルを見てみましょう Click To View

<div class="tab-content"> 
       <div class="tab-pane active" id="1"> 
        <div class="col-md-6"> 
     <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div> 
       </div> 

       </div> 
       <div class="tab-pane active" id="2"> 
       <div class="col-md-6"> 
         <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div> 
        </div> 
       </div> 
      </div>

出典

2016-08-04 05:15:19

ブートストラップタブ内のハイチャートグラフが正しく表示されない

答えて

関連する問題