Highcharts Graphen in Bootstrap-Registerkarten werden nicht richtig angezeigt

Ich habe zwei Registerkarten, Registerkarte 1 und Registerkarte 2, wenn die Seite geladen wird, das Diagramm in der ersten Registerkarte wird gleichzeitig geladen, die in col-md-6 passt, Jetzt, wenn ich auf Tab 2 klicke, wird das Diagramm in diesem Tab auf fast die Hälfte des ersten reduziert. Ich möchte, dass es auch in das col-md-6 passt, richtig und gut. Gibt es irgendetwas, was ich falsch mache?Highcharts Graphen in Bootstrap-Registerkarten werden nicht richtig angezeigt

bitte einen Blick auf diese jsfiddle

Quelle

2016-08-03 Bilal Ahmed

See [diese Frage] (http://stackoverflow.com/questions/17206631/why-are-bootstrap- tabs-displaying-tab-pane-divs-mit-falschen-breiten-wenn-verwenden. Es wird durch die Breite der versteckten Elemente verursacht, wo der Browser es nicht berechnet. –

@ PawełFus Ich lese die Antwort von Ryenus, aber das Problem bleibt immer noch, wenn ich die Größe des Browserfensters ändere. –

Versuchen Sie auch meine Lösungen, zum Beispiel: 'Render-Diagramm am Anfang, aber nach Tab klicken Sie auf Aufruf chart.reflow()'. –

Verwendung dieser jquery Registerkarte wählen Sie die Funktion haben, wird es Ihr Problem lösen.

here is modified fiddle click here

jQuery(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event 
    jQuery("#graph-container-gray, #graph-container-red").each(function() { 
     var chart = jQuery(this).highcharts(); // target the chart itself 
     chart.reflow() // reflow that chart 
    }); 
})

Quelle

2016-08-03 11:51:29

Das Problem besteht immer noch in deiner Geige. Bitte überprüfen Sie, indem Sie nur den Ergebnisbereich beibehalten – ganesshkumar

Ja, das Problem besteht immer noch, wenn ich das Browserfenster zu klein, und aktualisieren Sie dann die Seite, muss es die mobile oder Tablet-Ansicht haben, aber es dauert die 'min-width: 94 % ', was immer noch nicht die Lösung ist, die Größe des Fensters ändern und dann die Tabs wechseln, haben Sie den Unterschied. –

Ich aktualisierte meine Antwort siehe diese Geige https://jsfiddle.net/r9dt5j4n/6/ –

Nehmen Sie einen Blick auf diese Fiddle Click To View

<div class="tab-content"> 
       <div class="tab-pane active" id="1"> 
        <div class="col-md-6"> 
     <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div> 
       </div> 

       </div> 
       <div class="tab-pane active" id="2"> 
       <div class="col-md-6"> 
         <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div> 
        </div> 
       </div> 
      </div>

Quelle

2016-08-04 05:15:19

Highcharts Graphen in Bootstrap-Registerkarten werden nicht richtig angezeigt

Antwort

Verwandte Themen