Google Chart lädt extrem klein, wenn es in jQuery-basierten Tabs enthalten ist

8

Ich verwende Googles Liniendiagramm fast genau so wie die Demo - nur die Daten hat sich geändert - innerhalb von dieses jQuery-Tab-Plugin ohne Änderungen. Vielleicht wird das Diagramm in 50% der Fälle bei 400x200 geladen, obwohl angegeben wurde, dass es bei 700x250 geladen wird. Das enthaltende div wird die richtige Breite und Höhe haben, aber das Diagramm, wie es von der API gerendert wird, wird darin bei 400x200 geladen.

Ich vermute, das liegt daran, dass die Registerkarten nicht angezeigt werden, wenn die API versucht, zu rendern. Aus diesem Grund versucht es, in etwas zu rendern, das es als null betrachtet, und zwingt sich daher in die kleinste Standardauflösung.

Mein Gedanke ist, dass, wenn die Anzeige des Diagramms verzögert werden kann, bis die entsprechende Registerkarte angeklickt wird, es das Problem lösen würde. Leider weiß ich nicht, wie ich das machen soll, und meine Forschung war nicht fruchtbar. Der nächste, den ich finden konnte, ist dieser Thread , aber ich habe dort keine wirklichen Antworten gefunden.

Ich würde mich über jeden möglichen Rat freuen, wenn Sie irgendwelchen haben, und ich würde froh sein, mit mehr Information wenn notwendig zu folgen.

    
Community 02.09.2013, 00:59
quelle

4 Antworten

6

Ändern Sie die Diagrammoptionen, um die Breite und Höhe einzustellen, die Sie benötigen

%Vor%     
Michael B. 02.09.2013, 02:08
quelle
8

Das Rendern von Diagrammen in einem ausgeblendeten div (was die nicht ausgewählten Registerkarten einer Registerkarten-Benutzeroberfläche am wahrscheinlichsten sind) führt dazu, dass die Visualisierungs-API Dimensionen erkennen kann. Sie möchten also eines von zwei Dingen tun: Entweder alle Diagramme rendern bevor Sie Registerkarten instanziieren oder (wie Sie es verstanden haben) Ereignis-Listener binden, um die Diagramme zu zeichnen, wenn eine Registerkarte zum ersten Mal geöffnet wird. Das Festlegen der Höhe und Breite in den Optionen des Diagramms reicht nicht aus, um das Problem in allen Browsern zu lösen.

Ich habe die easyTabs-Dokumentation gescannt und es sieht so aus, als ob Sie in der Lage sein sollten, so etwas zu tun:

%Vor%     
asgallant 02.09.2013 04:06
quelle
0

So habe ich mit angular-bootstrap Ссылка

gelöst %Vor%

Jedes Mal, wenn ein Tab ausgewählt wird (die Funktion googleChartSizeFix wird ausgelöst), wird das Google Chart auf transparent gesetzt (Deckkraft = 0, verschwindet also nicht durch die Verwendung von hide ()), behält aber seine Größe bei, da sein Inhalt transparent ist ) gefolgt von der Fenstergröße wird ausgelöst, dies zwingt Google Chart, das div, das es enthält, durch die Verwendung von Breite 100% und Höhe 100% anzupassen:

%Vor%

Und schließlich, sobald das Google-Diagramm fertig ist (nach der Größenänderung), wird die displayGoogleCharts-Funktion ausgelöst und die Deckkraft des Google-Diagramms wird auf 1 zurückgesetzt, sodass der Inhalt wieder sichtbar ist.

    
Joebuntu 18.08.2015 19:33
quelle
0

Ich bin über diese "Funktion" der Bootstrap-Register gestolpert. Beim Ausschneiden und Einfügen mehrerer Tabs in meinem HTML habe ich versehentlich den & lt; div class="Tab-Bereich aktiv" & gt; im "aktiven" Zustand für alle Registerkarten. Das Ergebnis war, dass der Inhalt für alle Registerkarten nacheinander auf der ersten Registerkarte angezeigt wurde, aber verschwand, als Sie die Registerkarten wechselten.

Meine Lösung für die ausgeblendeten Tabs besteht darin, sie als aktiv zu definieren und dann die Klasse "active" aus dem div zu entfernen, nachdem ich chart.draw aufgerufen habe.

%Vor%

Ich sehe, dass jQuery-Registerkarten auch die Klasse "active" verwenden. Vielleicht wird dieser Trick auch dort funktionieren.

    
Ralph LeVan 08.12.2017 19:33
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Git: Wie man den lokalen Feature-Zweig mit den Änderungen im Dev aktualisieren kann?