Highcharts - Ukryte wykresy nie są prawidłowo zmieniane

Question

Mam obecnie 3 strony z zakładkami. Każda karta jest elementem div, który jest ustawiony na display: hidden, gdy nie jest wybrany. W tych zakładkach mam system Grid stworzony z Susy (plugin kompasu). Również każda strona z kartami zawiera zestaw Highcharts. Kiedy ładuję stronę, w zależności od tego, która karta jest w URl, ładowana jest jedna z kart. Wszystkie wykresy wyglądają dobrze, ale kiedy przełączam się na inną kartę, niektóre wykresy nie pasują poprawnie do div. Jeśli ponownie zmieniłem rozmiar okna, wykresy są ponownie obliczane, a następnie idealnie pasują. Lub jeśli przeładuję tę samą kartę, wykresy też się nadają. Czy mogę wywołać funkcję, która zmieni rozmiar wszystkich wykresów na stronie, gdy przełączę kartę?

Wygląda to tak:

kiedy powinno to wyglądać tak:

EDIT: Wydaje się jakby to nie jest problem bezpośrednio związany highcharts, na przykład My Google map wygląda następująco:

ale gdy rozmiar okna dostosowuje poprawnie:

Czy mogę odświeżać/dostosowywać moje siatki za pomocą wywołania funkcji w JS, gdy karta zostanie przełączona?

Answer 1

Co pracował dla mnie dzwoni:

$(window).resize(); 

Kiedy załadować nową kartę. Nadal występują problemy z interfejsem API Map Google, ale działa świetnie w przypadku usług 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 
    } 
} 

wykorzystanie

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

     }, 500); 
    }); 

do uruchamiającego karcie

$('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> 

na wykresie

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

kod 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> 

Zobacz na jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/

Answer 3

Znajdziesz tu wiele problemów, gdy starają się uczynić rzeczy, które zaczynają się przy użyciu "display: none". Chociaż $ (window) .resize() może działać w wielu przypadkach, sugerowałbym próbę najpierw wyrenderować twoją stronę przed wyświetlaniem: żaden z nich nie działa. Możliwym rozwiązaniem byłoby ustawienie krycia: 0 lub widoczność: ukryta.

Atrybut wyświetlania określa, w jaki sposób będzie renderowany element, na przykład blok (szerokość 100%) lub wiersz (dopasowanie zawartości). Kiedy element wyświetla: brak, zastępuje go, ostatecznie usuwając efektywną szerokość i wysokość, dopóki ten element nie otrzyma typu bloku.

Oto przykład wykazać: 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> 

Kiedy używasz „resize” hack, jesteś zakładając plugin lub skrypt, którego używasz jest wiążąca do przypadku zmiany rozmiaru okna, które nie zawsze jest walizka. Wyzwalanie window.resize może również spowalniać renderowanie lub powodować niepożądane efekty (na przykład małe highchety animacji mają miejsce podczas pierwszego renderowania - który wygląda lame, gdy dzieje się to za każdym razem, gdy zmieni się karta).