Dotnet highchart asp.net mit nav Tabs Bootstrap

Question

Es gibt etwas, das ich gerade fragen möchte, zum Beispiel das mein Code ist, wenn ich mit diesen Verweis angezeigt werden soll https://codepen.io/wizly/pen/BlKxo/ mit Dotnet highcharts oder highcharts

<div class="container"><h2>Example 3 </h2></div> 
     <div id="exTab3" class="container"> 
     <ul class="nav nav-pills"> 
      <li class="active"> 
       <a href="#1b" data-toggle="tab">Tab 1</a> 
      </li> 
      <li> 
       <a href="#2b" data-toggle="tab">Tab 2</a> 
      </li> 
     </ul> 

     <div class="tab-content clearfix"> 
      <div class="tab-pane active" id="1b"> 
       <div id=" chartContainerPies" style="width:100%;height:600px;"> 
        <asp:literal id="chartContainerPie" runat="server" ></asp:literal> 
       </div> 
      </div> 
      <div class="tab-pane" id="2b"> 
       <div id="chartContainerColumns" style="width:100%;height:500px;"> 
        <asp:Literal id="chartContainerColumn" runat="server"></asp:Literal> 
       </div> 
      </div> 
     </div> 
    </div> 

und das Ergebnis aus dieser Codierung werden in Web-Browser

jedoch angezeigt werden, ist dies das zweite nav Registerkarte Ergebnis worden. Wie Sie sehen können, ist die Größe des Diagramms auf 50% des ursprünglichen Diagramms reduziert.

das Problem ist, wie das Ergebnis in der zweiten Registerkarte zu machen, ist mit der ersten Registerkarte deutlich ähnlich? Irgendwelche Vorschläge für dieses Problem? vielen Dank

Aktualisiert: nachdem ich die Grenze setzen, dann ist dies das Ergebnis

Answer 1

Dieser Beitrag ist die direkte Antwort von ryenus in Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

Die Ursache

Dies ist kein Highcharts-Problem, zumindest nicht von allein, das Problem wird durch die Tatsache verursacht, dass Bootstrap display: none verwendet, um inaktive Tabs zu verstecken:

.tab-content > .tab-pane, .pill-content > .pill-pane { 
    display: none;  /* this is the problem */ 
} 

Dies bewirkt, dass Highcharts die erwartete Breite nicht zum Initialisieren des Diagramms erhalten kann. Daher wird standardmäßig 600px verwendet. Dies würde anderen Tools passieren, die den gleichen Ansatz verwenden, um Inhalte zu verbergen.

Eine reine CSS-Lösung

Statt mit einem zusätzlichen Neuaufbau oder verzögerte Initialisierung, um das Problem zu arbeiten, können wir den versteckten Effekt mit Höhe erreichen: 0; Überlauf-y: versteckt, auf diese Weise der verborgenen Register Scheiben ist noch vorhanden ist und gültige Breite:

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */ 

Update: Die bisherige 2-Schritt-Lösung zunächst alle Registerkarten verbirgt, dann macht die aktiven Register wieder sichtbar. Im Vergleich dazu haben wir jetzt eine 1-Schritt-Lösung, die direkt auf die inaktiven Tabs abzielt.

Diese Lösung ist nahtlos, so dass Sie sich keine Sorgen mehr machen müssen, ob sich das Diagramm in einem Tab-Bereich befindet oder nicht. Und es ist effizient, da es das Problem mit der Breite an erster Stelle behebt. Daher ist es nicht nötig, das Problem mit der Breite nachträglich zu umgehen, indem Sie die Größe/Neuzeichnen/Reflow mit Javascript ändern.

Hinweis über kaskadierende Reihenfolge

Dieser Patch nach Bootstrap CSS geladen werden muss, da der CSS Cascading um Regeln, kurz gesagt, diese Regel gewinnt.

Also, für alle, die dasselbe Problem haben, wenn Sie mehr als ein Diagramm in die Nav-Registerkarten setzen, wird Ihnen das durch das Problem helfen.