Il dimensionamento del grafico C3 è troppo grande quando inizialmente caricato

Question

Sto usando la libreria JavaScript C3 per la visualizzazione dei dati del grafico. Quando la mia pagina inizialmente viene caricata, i grafici sono nascosti. Non è finché non viene selezionata una "scheda" sulla pagina che i grafici vengono visualizzati.

Il problema che sto vedendo è che il mio primo grafico non si adatta al suo tag div contenente quando viene caricato per la prima volta. Posso modificare l'intervallo di date per cui visualizzo i dati facendo clic su un pulsante, in quel momento i grafici saranno correttamente dimensionati.

Ecco il relativo codice HTML che sto usando per i grafici (si noti che sto usando AngularJS, nel caso che aiuta/ostacola le cose a tutti):

<div class="chartgrouping"> 

<div ng-show="showGraphSection" class="graphA"> 
    <h2 class="section-main-heading">Data A</h2> 
    <div id="dataAChart" class="chart c3"></div> 
</div> 
<div ng-show="showGraphSection" class="graphB"> 
    <h2 class="section-main-heading">Data B</h2> 
    <div class="stats"> 
     <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div> 
     <div class="goals">GOAL: 20%</div> 
    </div> 
    <div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div> 
</div> 

</div> 

L'iniziale, la visualizzazione non corretta (la primo grafico estende per tutta la strada attraverso):

E il risultato corretto dopo il caricamento di nuovi dati, dopo il primo risultato (sopra) è stato visualizzato:

Esiste una buona soluzione a questo problema?

Answer 1

Ho trovato che la soluzione si riferisce a come determina la larghezza completa dell'elemento quando è nascosta (spesso nel caso in cui si utilizzano le schede di bootstrap ecc. E altri elementi nascosti).

Per aggirare questo problema, è necessario attivare l'evento di ridimensionamento sulla finestra per fare in modo che d3 (la libreria di grafici sottostante) elabori il dimensionamento corretto.

jQuery(window).trigger('resize');

È possibile farlo su bootstrap con qualcosa di simile ad

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() { jQuery(window).trigger('resize'); });

Answer 2

Dopo aver provato una varietà di possibilità, ho finalmente trovato una soluzione. È una soluzione angolare, quindi chiunque altro verifichi il problema e non utilizzi Angular dovrà modificarlo in modo appropriato.

Come ho risolto era, piuttosto che usare un ng-show sul genitore div, l'ho rimosso e ne ho aggiunto copie esatte a ogni sotto-tag (i fratelli h2 e h2s). Soluzione semplice, ma un tale dolore da capire.

Answer 3

Nel mio caso, la risposta di @ Flanamacca solo parzialmente lavorato. Caricare i dati del grafico con un setTimeout con ritardo di 0 sembra risolverlo.

Answer 4

Se si utilizza Fondazione con più schede allora la seguente ha lavorato per me,

$('#myPanelId').on('toggled', function(){ 
     jQuery(window).trigger('resize'); 
}) 

Dove myPanelId è l'ID del pannello che contiene i grafici.

Answer 5

@ La risposta di Flanamacca non ha funzionato per me, sebbene si trattasse di un problema relativo alla scheda di bootstrap, quindi ho utilizzato il selettore jQuery che hanno suggerito.

Ciò che ha funzionato per me è stato il metodo c3 flush(), che costringe il grafico a ridisegnare (vedere http://c3js.org/reference.html#api-flush).

$('a[data-toggle=tab]').on('shown.bs.tab', function() { 
    my_c3_chart.flush(); 
}); 

Answer 6

semplicemente impostando il CSS max-width del div che contiene il grafico ha lavorato per me.

Answer 7

La roba jQuery(window).trigger('resize'); non ha funzionato per me. Ma usando C3 funzione resize () funziona come un boss:

var chart = c3.generate({ 
bindto: '#chart', 
data: { 
    columns: [ 
     ['data1', 300, 350, 300, 0, 0, 0], 
     ['data2', 130, 100, 140, 200, 150, 50] 
    ], 
    types: { 
     data1: 'area', 
     data2: 'area-spline' 
    } 
} 
}); 


$('.collapse').on('shown.bs.collapse', function() {//Your event listner 
    chart.resize(); 

});