Zeichnung flicht Diagramm innerhalb Bootstrap-Register Ausgabe

Question

Ich versuche, ein flicht Diagramm innerhalb eines Bootstrap-Register zu verwenden, alle obwohl die Javascript nicht das Diagramm korrekt ist zu zeichnen, seine verzerrte immer gezeichnet, sind die Texte zu nahe an die Graph.

<div id="tab3" class="tab-pane fade"> 
<div class="chart_flot" style="width:600px;height:300px;"></div> 
</div> 

Außerhalb der Registerkarte funktioniert das Diagramm gut. Ich habe mit CSS mit rund versucht zu spielen, aber die einzige Lösung, die ich gefunden habe ist, Einstellung nicht die Registerkarten Stil (display: none) als Standard, bevor Registerkarte ausgewählt, zum Beispiel:

<div id="tab3" class="tab-pane fade" style="display:block"> 
<div class="chart_flot" style="width:600px;height:300px;"></div> 
</div> 

Ich habe versucht, um die Anzeige zu setzen: Blockieren Sie die Registerkarte, die für das Diagramm verwendet wird, und die Grafik wurde gut gezeichnet, aber auf der anderen Registerkarte Auswahl würde die Leinwand nicht verschwinden.

Lösung.

ich daran erinnern, dass dies ein Diagramm innerhalb Bootstrap-Standard-Registerkarten Bug. Der Grund, warum es verzerrt gezeichnet wurde, ist, dass das Diagramm in einem versteckten Div (Anzeige: keine) nicht korrekt gezeichnet werden kann.

Es gibt 3 Möglichkeiten, dieses Problem zu beheben.

1. einen JavaScript-Trigger hinzufügen, die das Diagramm nur nach der Registerkarte mit dem ausgewählten Diagramm zeichnen werden.
2. Verwenden Sie nicht Bootstrap und nur eigene Tabs Skript, das die Registerkarten auf laden und nicht anzeigen: keine als Standard auf nicht ausgewählten Registerkarten ausblenden.

3. einfache Art und Weise, mit CSS

   #tabid { 
       width:0; 
       display:block; 
       visibility:hidden; 
       height:0; 
   } 
   #tabid.active { 
       width:100%; 
       height:100%; 
       visibility:visible; 
   } 
   

Ich hoffe, das für einige Leute nützlich sein wird.

Answer 1

Lösung.

Ich erinnere, dass dies ein Diagramm im Bootstrap Standard-Tabs Bug ist. Der Grund, warum es verzerrt gezeichnet wurde, ist, dass das Diagramm in einem versteckten Div nicht korrekt gezeichnet werden kann (Anzeige: keine).

Es gibt 3 Möglichkeiten, dieses Problem zu beheben.

1. einen JavaScript-Trigger hinzufügen, die das Diagramm nur nach der Registerkarte mit dem ausgewählten Diagramm zeichnen werden.
2. Verwenden Sie nicht Bootstrap und nur eigene Tabs Skript, das die Registerkarten auf laden und nicht anzeigen: keine als Standard auf nicht ausgewählten Registerkarten ausblenden.

3. einfache Art und Weise, mit CSS

   tabid {

   width:0; 
   display:block; 
   visibility:hidden; 
   height:0; 
   

   }

   tabid.active {

   width:100%; 
   height:100%; 
   visibility:visible; 
   

   }