Schede di Google Charts e Twitter Bootstrap

Question

Sto creando grafici tramite Strumenti grafici di Google, in una pagina Web utilizzando il framework di Bootstrap di Twitter. Sono mostrati tre tipi di grafici: grafici a torta, linee e colonne, ciascuno in una singola scheda. I dati del grafico vengono ricevuti tramite Ajax.

Immediatamente dopo aver ricevuto i dati tramite Ajax, il grafico viene visualizzato correttamente. Ma se mi sposto in un'altra scheda, ad esempio un altro grafico, e ritorno al primo, le etichette nel grafico vengono riallineate in modo errato.

incluse in questo documento sono le immagini che mostrano il problema, prima e dopo il cambio scheda:

Questo problema si verifica per la linea e istogrammi troppo.

Ma il problema non si verifica se cambio la finestra e poi torno indietro, o se nascondo e poi rivisita i grafici. Si verifica solo se cambio le schede.

Il mark-up per le schede è come questo:

<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> 

Controllato in Chrome 22, IE9 e Firefox 12. Il risultato è lo stesso. Non è stato programmato alcun codice/evento aggiuntivo alla mia estremità per gli eventi di cambio scheda o tabulazione.

Answer 1

Come mohitp ha sottolineato, ci sono alcuni aspetti negativi della soluzione di davidkonrad. Se vuoi comunque che i grafici rimangano funzionanti dopo averli disegnati, (cioè, descrizioni dei comandi), dovrai usare Javascript per ridisegnare il grafico.

Dato l'esempio di David (meno il codice di spostamento fittizio) è sufficiente spostare la variabile grafico con le sue opzioni & datatable intatta a un ambito globale e chiamare di nuovo il metodo draw, si può vedere un esempio di questo in azione qui: redraw-google-chart

Con l'esempio di David, una volta che hai il grafico e le informazioni grafici su un ambito globale è necessario legare il seguente all'evento indicato della scheda come così:

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

Nella mia applicazione traggo le mie classifiche basato su richieste JSON lato server & ci sarebbero dei casi in cui potrei avere molti grafici su una singola pagina, quindi ho aggiunto i miei grafici & alla creazione di informazioni sugli array a livello globale che potrebbero essere rielaborati lato client tutte le volte che è necessario.

Answer 2

Sì, che è molto facile riproducibile (nix/vari browser) utilizzando il vostro codice e l'esempio piechart a https://google-developers.appspot.com/chart/interactive/docs/quick_start

Sembra che l'API si espande al centro metà del SVG in sede di elaborazione di testo per le schede nascoste. Ma ho trovato una soluzione: disegnare il grafico/linea/barra su un elemento fittizio e spostarli immediatamente nel contenitore di schede.

alterato esempio grafico dall'alto:

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); 
    } 

da qualche parte nel code Aggiungi

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

disegnare i grafici (via fittizio al vostro .. class="chart xxx" id="xxx-prt")

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

poi il i grafici sono resi allo stesso modo su diverse schede, ecco un violino http://jsfiddle.net/sjW6Z/ dimostrando che funziona effettivamente :)