C3-Diagramm Größe ist zu groß, wenn anfänglich geladen

Question

Ich verwende die C3 JavaScript-Bibliothek für die Anzeige von Grafikdaten. Wenn meine Seite anfänglich geladen wird, sind die Grafiken ausgeblendet. Erst wenn ein "Tab" auf der Seite ausgewählt ist, werden die Graphen angezeigt.

Das Problem, das ich sehe, ist, dass mein erstes Diagramm nicht sein enthaltenes div-Tag beim ersten Laden passt. Ich kann den Datumsbereich, für den ich Daten ansehe, ändern, indem ich auf eine Schaltfläche klicke. Zu diesem Zeitpunkt werden die Grafiken korrekt skaliert.

Hier ist der relevante HTML, die ich für die Graphen bin mit (man beachte, dass ich AngularJS verwende, falls die/Dinge überhaupt hilft behindert):

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

Die anfängliche, falsche Anzeige (die erste grafische Darstellung erstreckt sich den ganzen Weg über):

Und das richtige Ergebnis nach neuen Daten nach dem ersten Ergebnis Laden (siehe oben) angezeigt wurde:

Gibt es eine gute Lösung für dieses Problem?

Answer 1

Ich habe gefunden, dass die Lösung bezieht sich darauf, wie es die volle Breite des Elements bestimmen, wenn ausgeblendet (oft der Fall bei der Verwendung von Bootstrap-Registerkarten usw. und andere versteckte Elemente).

Um dies zu umgehen, müssen Sie das Größenänderungsereignis im Fenster auslösen, damit d3 (die zugrunde liegende Grafikbibliothek) die richtige Größe ermittelt.

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

Sie können dies verwandt etwas mit auf Bootstrap tun, um

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

Answer 2

Nachdem ich eine Vielzahl von Möglichkeiten ausprobiert hatte, fand ich endlich eine Lösung. Es ist eine Angular-Lösung, so dass jeder, der das Problem hat und Angular nicht verwendet, es entsprechend modifizieren muss.

Wie ich es gelöst habe, war, anstatt eine ng-Show auf dem Elternteil Div zu verwenden, ich entfernte dieses und fügte genaue Kopien davon jedem Untertag hinzu (die Geschwister h2 und h2s). Einfache Lösung, aber so ein Schmerz, um herauszufinden.

Answer 3

In meinem Fall @ Antwort Flanamacca die nur teilweise funktioniert. Das Laden der Diagrammdaten mit einer setTimeout mit Verzögerung von 0 scheint es zu beheben.

Answer 4

Wenn Sie Foundation mit mehreren Registerkarten verwenden, dann für mich die folgenden gearbeitet,

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

Wo myPanelId das Panel-ID ist, die die Diagramme enthält.

Answer 5

@ Flanamacca's Antwort funktionierte nicht für mich, obwohl es ein Bootstrap Tab-related Problem war, so dass ich den jQuery Selektor sie vorgeschlagen haben.

Was für mich funktionierte, war die c3 flush() -Methode, die das Diagramm zum Neuzeichnen zwingt (siehe http://c3js.org/reference.html#api-flush).

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

Answer 6

Einfach die CSS max-width des div, das das Diagramm enthält, für mich gearbeitet.

Answer 7

Die jQuery(window).trigger('resize'); Zeug hat nicht für mich funktioniert. Aber C3 mit resize () Funktion arbeitet wie ein Chef:

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

});