Google Charts und Twitter Bootstrap-Registerkarten

Question

Ich erstelle Diagramme über Google Chart Tools auf einer Webseite mit dem Twitter Bootstrap-Framework. Es gibt drei Arten von Diagrammen: Kreis-, Linien- und Säulendiagramme, jeweils in einem einzelnen Register. Die Kartendaten werden über Ajax empfangen.

Sofort nach dem Empfang der Daten über Ajax wird das Diagramm angezeigt. Wenn ich jedoch zu einem anderen Tab, d. H. Einem anderen Chart, gehe und zu dem ersten Chart zurückkehre, werden die Labels im Chart falsch ausgerichtet.

Eingeschlossen hierin sind die Bilder, die das Problem zeigen, vor und nach dem Registerkarte Änderung:

Dieses Problem tritt für die Zeile und Spalte zu Charts.

Aber das Problem tritt nicht auf, wenn ich das Fenster ändere und dann zurückkomme, oder wenn ich die Diagramme verstecke und dann wieder zeige. Es tritt nur auf, wenn ich die Tabs ändere.

Die Mark-up für die Registerkarten ist wie folgt:

<div class="charts-div" style="text-align: center"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#tab-pie" data-toggle="tab">Pie</a></li> 
       <li><a href="#tab-line" data-toggle="tab">Line</a></li> 
       <li><a href="#tab-column" data-toggle="tab">Columns</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab-pie"> 
        <div class="chart pie-chart" id="pie-prt"></div> 
       </div> 
       <div class="tab-pane" id="tab-line"> 
        <div class="chart line-chart" id="line-prt"></div> 
       </div> 
       <div class="tab-pane" id="tab-column"> 
        <div class="chart column-chart" id="column-prt"></div> 
       </div> 
      </div> 

    </div> 

Checkten Chrome 22, IE9 und Firefox 12. Das Ergebnis ist das gleiche. Es gibt keinen zusätzlichen Code/Event, der an meinem Ende für Tab-Change- oder Tab-Fokus-Events programmiert wurde.

Answer 1

Wie mohitp darauf hingewiesen hat, gibt es einige Nachteile der Lösung von davidkonrad. Wenn Sie weiterhin möchten, dass die Diagramme nach dem Zeichnen weiterhin funktionsfähig sind (z. B. Tooltips), müssen Sie Javascript verwenden, um das Diagramm erneut zu zeichnen.

Davids Beispiel (minus der Dummy-Verschiebung-Code) einfach die das Diagramm Variable bewegt damit Optionen ist & Datentabelle intakt zu einem globalen Bereich und rufen Sie die Zeichenmethode wieder gegeben, dass Sie hier ein Beispiel dafür in Aktion sehen können: redraw-google-chart

Mit Davids Beispiel, wenn Sie Ihr Diagramm und Charting-Informationen über eine globale Reichweite, die Sie brauchen, wie so die folgenden auf die gezeigte Ereignis Ihrer Registerkarte zu binden:

$('a[data-toggle="tab"]').on('shown', function (e) { 
    chart.draw(data, options); 
    }) 

In meiner eigenen Anwendung ich meine Charts zeichnen basierend auf serverseitigen JSON-Anfragen & Es gibt Fälle, in denen ich viele Diagramme auf einer einzelnen Seite haben könnte. Stattdessen habe ich meine Diagramme & an globale Array-Arrays angehängt, die so oft wie nötig clientseitig aufbereitet werden können.

Answer 2

Ja, das ist sehr einfach reproduzierbaren (nix/verschiedenen Browsern) unter Verwendung von Markup und das piechart Beispiel bei https://google-developers.appspot.com/chart/interactive/docs/quick_start

Es scheint, dass die API die Mitte Mitte des SVG erweitert, wenn der Text auf versteckte Registerkarten Zeichnung. Aber ich habe einen Workaround gefunden: Zeichnen Sie das Diagramm/Linie/Bar auf ein Dummy-Element und verschieben Sie sie sofort in den Tab-Container.

veränderte Grafik Beispiel von oben:

function drawChart(id) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 2], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300}; 

    var chart = new google.visualization.PieChart(document.getElementById('dummy')); 
    chart.draw(data, options); 
    $('#dummy').children().remove().appendTo('#'+id); 
    } 

irgendwo im Code hinzufügen

<div id="dummy"></div> 

die Charts zeichnen (via Dummy auf Ihre .. class="chart xxx" id="xxx-prt")

<script type="text/javascript"> 
$(document).ready(function() { 
    drawChart('pie-prt'); 
    drawChart('line-prt'); 
    drawChart('column-prt'); 
}); 
</script> 

dann die Charts wird auf verschiedenen Tabs gleich dargestellt, hier ist eine Geige http://jsfiddle.net/sjW6Z/ demonstriert, dass es tatsächlich funktioniert :)