Highcharts - Versteckte Charts werden nicht richtig skaliert

Question

Ich habe derzeit eine 3-Tab-Seite. Jede Registerkarte ist ein div, das auf display: hidden gesetzt ist, wenn es nicht ausgewählt ist. In diesen Tabs habe ich ein Grid-System mit Susy (Kompass-Plugin) erstellt. Außerdem enthält jede Registerkarte eine Reihe von Highcharts. Wenn ich die Seite lade, hängt es davon ab, welche Registerkarte sich in der URl befindet, eine der Registerkarten wird geladen. Alle Diagramme sehen gut aus, aber wenn ich auf eine andere Registerkarte wechsle, passen einige der Diagramme nicht korrekt in ihr Div. Wenn ich das Fenster neu skaliere, werden die Diagramme neu berechnet und passen dann perfekt. Oder wenn ich denselben Tab neu lade, passen die Charts auch gut. Kann ich eine Funktion aufrufen, die die Größe aller Diagramme auf der Seite ändert, wenn ich den Tab wechseln lasse?

Es sieht wie folgt aus:

, wenn es soll wie folgt aussehen:

EDIT: Scheint, wie dies kein Problem ist direkt an highcharts bezogen, zum Beispiel meines google maps sieht wie folgt aus:

aber wenn ich das Fenster passt es richtig die Größe:

Kann ich CSS aktualisieren/anpassen meine Gitter durch einen Funktionsaufruf in JS, wenn die Registerkarte gewechselt wird?

Answer 1

Was für mich gearbeitet ruft:

$(window).resize(); 

Wenn ich einen neuen Tab laden. Probleme mit dem Google Maps-API, aber es funktioniert gut mit 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 
    } 
} 

Nutzung

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

     }, 500); 
    }); 

für Bootstrap-Tab

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

auf Diagramm

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

HTML-Code

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> 

auf jsfiddle Siehe http://jsfiddle.net/davide_vallicella/LuxFd/2/

Answer 3

Sie viele Fragen finden, wenn Sie versuchen, die Dinge zu machen, die mit beginnen "display: none". Während $ (window) .resize() in vielen Fällen funktionieren könnte, würde ich vorschlagen, zuerst Ihre Seite zu rendern, bevor sie angezeigt wird: keine wird wirksam. Eine mögliche Lösung wäre die Opazität: 0 oder Sichtbarkeit: versteckt.

Das Anzeigeattribut steuert, wie das Element gerendert wird, z. B. Block (100% Breite) oder Inline (Inhalt anpassen). Wenn ein Element display: none hat, überschreibt es dies und entfernt letztendlich seine effektive Breite und Höhe, bis dieses Element einen Blocktyp erhält.

ist hier ein Beispiel zu demonstrieren: 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> 

Wenn Sie die „Größe ändern“ Hack verwenden, können Sie das Plugin oder Skript vorausgesetzt, Sie auf das Resize-Ereignis des Fensters, die nicht immer verwenden, ist verbindlich der Fall. Das Auslösen der window.resize könnte auch das Rendering verlangsamen oder unerwünschte Effekte verursachen (zum Beispiel die kleinen Animations-Highcharts beim ersten Rendering - was bei jedem Tab-Wechsel lahm aussieht).