highcharts圖被顯示不正常

我有兩個標籤，標籤1和片2，當最初加載的網頁，在所述第一標籤中的圖表的同時被加載，這是col-md-6嵌合右，現在，當我點擊選項卡，在該選項卡中的圖形被昏倒幾乎一半的第一個，我希望它也適合在col-md-6權和罰款，有什麼我做錯了嗎？highcharts圖被顯示不正常

請看看這個jsfiddle

來源

2016-08-03 Bilal Ahmed

參見[這個問題]（http://stackoverflow.com/questions/17206631/why-are-bootstrap-突片-顯示標籤窗格-的div與 - 不正確-寬度- - 使用時）。這是由隱藏元素的寬度引起的，瀏覽器不計算它。 –

@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

highcharts圖被顯示不正常

回答

相關問題