Google Chart carica estremamente piccolo quando è incluso nelle schede basate su jQuery

Question

Sto usando il numero line chart di Google quasi esattamente come la demo - solo i dati sono cambiati - all'interno di this jQuery tab plugin senza modifiche. Forse il 50% delle volte, il grafico verrà caricato a 400x200 anche se è stato specificato per caricare a 700x250. Il div contenente avrà la larghezza e l'altezza corrette, ma il grafico reso dall'API verrà caricato all'interno di quello a 400x200.

Ho il sospetto che ciò avvenga perché le schede non vengono visualizzate quando l'API tenta di eseguire il rendering. Per questo motivo, tenta di eseguire il rendering in qualcosa che considera nullo e quindi si impone nella risoluzione predefinita più piccola.

Il mio pensiero è che se il display del grafico può essere ritardato fino a quando non viene cliccata la scheda appropriata, risolverebbe il problema. Purtroppo, non ho idea di come farlo, e la mia ricerca non è stata fruttuosa. Il più vicino che ho trovato è this thread, ma non ho trovato nessuna risposta reale lì.

Apprezzerei qualsiasi consiglio se ne avete, e sarei felice di dare ulteriori informazioni se necessario.

Answer 1

opzioni grafico cambiamento per impostare la larghezza e l'altezza di cui hai bisogno

var options = { 
      title: 'Company Performance' 
      ,width:900 
      ,height:500 
     }; 

Answer 2

rendering grafici in un div nascosto (che è ciò che le schede non selezionati di una scheda di interfaccia utente molto probabilmente sono) pasticci con la visualizzazione La capacità dell'API di rilevare le dimensioni, quindi ti consigliamo di fare una delle due cose: o renderizza tutti i grafici prima di creare un'istanza di schede o (come hai capito) associare i listener di eventi ai grafici quando viene aperta una scheda. Impostare l'altezza e la larghezza nelle opzioni del grafico non è sufficiente per risolvere il problema in tutti i browser.

ho scansionato sopra la documentazione EasyTabs, e sembra che si dovrebbe essere in grado di fare qualcosa del genere:

// draw chart(s) in your default open tab 

// track which tabs you've drawn charts in 
var chartsDrawn = { 
    tab1: true, 
    tab2: false, 
    tab3: false 
    // etc 
}; 

$('#tab-container').bind('easytabs:after', function (e) { 
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) { 
     // draw chart(s) in tab 2 
     chartsDrawn.tab2 = true; 
    } 
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) { 
     // draw chart(s) in tab 3 
     chartsDrawn.tab3 = true; 
    } 
    // etc 
}); 

Answer 3

Questo è come ho risolto utilizzando angolare bootstrap https://angular-ui.github.io/bootstrap/

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div> 

<tab heading="Past Week" select="googleChartSizeFix()"> 

googleChartSizeFix = function() { 
    $('svg').parent().css({ opacity:"0" }); 
    $(window).resize(); 
}; 

displayGoogleCharts = function() { 
    $('svg').parent().css({ opacity:"1" }); 
}; 

Ogni quando viene selezionata una scheda (viene attivata la funzione googleChartSizeFix), il grafico di Google è impostato su trasparente (opacità = 0, quindi non scompare con l'uso di hide(), ma mantiene le sue dimensioni poiché il suo contenuto è trasparente) seguito dal ridimensionamento della finestra è triggere d, questo costringe Google Grafico per adattarsi al div che lo contiene, con l'uso di larghezza di 100% e l'altezza al 100%:

"options": { 
    "chartArea": { 
     "width":'100%', 
     "height":'100%' 
    } 
} 

e, infine, una volta che il Grafico di Google è pronto (dopo il ridimensionamento) viene attivata la funzione displayGoogleCharts e l'opacità del grafico di Google viene reimpostata su 1, quindi il contenuto è nuovamente visibile.

Answer 4

Mi sono imbattuto in questa "funzionalità" delle schede Bootstrap. Quando ho tagliato e incollato più schede nel mio codice HTML, ho lasciato accidentalmente la classe di divisione < = "scheda-scheda attiva"> nello stato "attivo" per tutte le schede. Il risultato è stato che il contenuto di tutte le schede visualizzato in sequenza nella prima scheda, ma è andato via mentre si passa schede.

La mia soluzione per le schede nascoste è definirli come attivi e quindi rimuovere la classe "attiva" dal div dopo aver chiamato chart.draw.

<div class="tab-pane active" id="myid" role="tabpanel"> 
    <script type="text/javascript"> 
     // all the chart stuff 
     chart.draw(data, options); 
     $('#myid').removeClass('active'); 
    </script> 
</div> 

Vedo che le schede jQuery utilizzano anche la classe "attiva". Forse questo trucco funzionerà anche lì.