Highcharts - 隱藏圖表無法正確重新調整大小

Question

我目前有3個選項卡式頁面。每個選項卡都是未選中時設置爲display: hidden的div。在這些標籤中，我有一個使用Susy（指南針插件）創建的網格系統。另外每個標籤頁都有一組Highcharts。當我加載頁面時，取決於URl中的哪個選項卡，加載了其中一個選項卡。所有的圖表看起來都很好，但是當我切換到另一個選項卡時，某些圖表不適合他們的div。如果我只是重新調整窗口的大小，圖表將被重新計算，然後它們完美匹配。或者，如果我重新加載相同的選項卡，圖表也很適合。 當我進行標籤切換時，我可以調用一個函數來調整頁面上的所有圖表嗎？

它看起來像這樣：

當它應該是這樣的：

編輯： 看起來這是沒有直接關係的highcharts一個問題，例如我的Google地圖看起來是這樣的：

但是當我調整窗口，它正確地調整：

當標籤切換時，我可以通過JS中的函數調用讓CSS刷新/調整網格嗎？

Answer 1

什麼工作對我來說是調用：

$(window).resize(); 

當我打開一個新的標籤。 Google地圖API仍然存在問題，但它對Highcharts非常有用。

Answer 2

/** 
* Adjust size for hidden charts 
* @param chart highcharts 
*/ 
function adjustGraph(chart) { 
    try { 
     if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set 
      this.find('.chart-container:visible').each(function() { // for only visible charts container in the curent context 
       $container = $(this); // context container 
       $container.find('div[id^="chart-"]').each(function() { // for only chart 
        $chart = $(this).highcharts(); // cast from JQuery to highcharts obj 
        $chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition 
       }); 
      }); 
     } else { 
      chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust 
     } 
    } 
    catch (err) { 
     // do nothing 
    } 
} 

在圖表上使用

$(window).resize(function() { 
     if (this.resizeTO) clearTimeout(this.resizeTO); 
     this.resizeTO = setTimeout(function() { 
      // resizeEnd call function with pass context body 
      adjustGraph.call($('body')); 

     }, 500); 
    }); 

自舉標籤

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
      var isChart = $(this).attr('data-chart'); 
      var target = $(this).attr('href'); 
      if (isChart) { 
       // call functio inside context target 
       adjustGraph.call($(target)); 
      } 
     }); 



    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
     <li class="active"> 
      <a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a> 
     </li> 
     <li> 
      <a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a> 
     </li> 
    </ul> 

new Highcharts.Chart({ 
      chart: { 
       renderTo: 'chart-bar', 
       defaultSeriesType: 'column', 
       zoomType: 'xy', 
       backgroundColor: null, 
       events: { 
        load: function (event) { 
         adjustGraph(this); 
        } 
       } 
      }, 

HTML代碼

div class="tab-pane" id="charts"> 
    <div class="row-fluid"> 
     <div class="span6 offset3"> 
      <div id="myCarousel" class="carousel slide"> 
       <!-- Carousel items --> 
       <div class="carousel-inner chart-container"> 
        <div class="active item"> 
         <h3>Chart 1/h3> 
         <div id="bar-pod-annuale"> 
          <div id="chart-bar" style="width:100%;margin: 0 auto"></div> 
         </div> 
        </div> 
        <div class="item"> 
         <h3>Char 2</h3> 
         /** chart **/ 
        </div> 
        <div class="item"> 
         <h3>Char 3</h3> 
         /** chart **/ 
        </div> 
       </div> 
       <!-- Carousel nav --> 
       <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
       <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
      </div> 
     </div> 
    </div> 

查看的jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/

Answer 3

你會發現很多的問題，當你試圖呈現的東西，開始的時候使用 「顯示：無」。儘管$（window）.resize（）在很多情況下都可以工作，但我建議在顯示之前先嚐試渲染頁面：無效。可能的解決方案是設置不透明度：0或可見性：隱藏。

display屬性控制元素將如何呈現的內容，例如塊（100％寬度）或內聯（適合內容）。當一個元素的display：none時，它會覆蓋它，最終刪除它的有效寬度和高度，直到該元素接收到一個塊類型。

下面是一個例子來說明：http://jsfiddle.net/m2f3scmm/3/

<div id="log1" style="display: none;"> 
</div> 
<div id="log2" style="visibility: hidden;"> 
</div> 
<div id="log3" style="opacity: 0"> 
</div> 

當您使用了「調整」的黑客，我們假定你是插件，或者你正在使用綁定到窗口的resize事件腳本，這並不總是案子。觸發window.resize也可能會減慢渲染速度或導致不必要的效果（例如，第一次渲染時會出現小動畫高點圖 - 當每次選項卡更改時都會發生這種情況）。