Wie zeichne / skaliere ich ein Google-Liniendiagramm beim Ändern der Fenstergröße neu?
javascript
jquery
resize
google-visualization
thecodeparadox
quelle
quelle
Antworten:
Um nur nach Abschluss der Fenstergrößenänderung neu zu zeichnen und mehrere Auslöser zu vermeiden, ist es meines Erachtens besser, ein Ereignis zu erstellen:
quelle
Der Originalcode von Google macht dies einfach am Ende:
Wenn Sie es mit etwas Javascript ändern, können Sie es skalieren, wenn die Größe des Fensters geändert wird:
quelle
window.onload = resize();
ist gleichbedeutend mitresize(); window.onload = undefined;
Da das
window.resize
Ereignis bei jedem Größenänderungsereignis mehrmals ausgelöst wird, ist es meiner Meinung nach die beste Lösung, smartresize.js zu verwenden und zu verwendensmartdraw()
. Dies begrenzt die Anzahl der Neuzeichnungen von Diagrammen prowindow.resize
.Mit den bereitgestellten js können Sie dies so einfach tun:
quelle
Dies ist der einfachste Weg, dies zu tun, ohne den Browser zu stark zu belasten:
Warten Sie lediglich 1 Sekunde, bevor das Diagramm neu geladen wird, und lassen Sie die Funktion in dieser Wartezeit nicht erneut aufrufen. Da Fenstergrößenänderungsfunktionen bei jeder Änderung der Fenstergröße mehrmals aufgerufen werden, funktioniert die Funktion nur einmal, wenn Sie die Fenstergröße ändern. Der Rest der Aufrufe wird durch die if-Anweisung gestoppt.
ich hoffe das hilft
quelle
In der Google Visualization API gibt es keine Option, um Google Charts ansprechbar zu machen.
Aber wir können Google Charts reagieren , wie Fensters ändert machen . Um Google Chart reaktionsfähig zu machen, steht bei GitHub eine jQuery-Bibliothek zur Verfügung - jquery-smartresize, lizenziert unter MIT-Lizenz, mit der die Größe von Diagrammen bei Fenstergrößenänderungsereignissen geändert werden kann.
Dieses Projekt auf GitHub hat zwei Skriptdateien: -
&
Hier sind zwei Beispiele für reaktionsfähige Diagramme ...
Wir können den unteren Abstand von visualization_wrap ändern, um ihn an das gewünschte Seitenverhältnis des Diagramms anzupassen.
Wir können die Diagrammbereichsoption von Google Chart anpassen, um sicherzustellen, dass Etiketten beim Ändern der Größe nicht abgeschnitten werden .
quelle
Zeichnen / Skalieren Sie ein Google-Liniendiagramm in der Fenstergröße neu:
quelle
Ich persönlich bevorzuge den folgenden Ansatz, wenn Sie mit addEventListener leben können und die mangelnde Unterstützung für IE <9 nichts ausmacht.
Beachten Sie die Verwendung der
setTimeout()
undclearTimeout()
Funktionen und die zusätzliche Verzögerung von 750 Millisekunden, die das macht etwas weniger intensiv , wenn mehrere Resize Ereignisse Feuer in schnellen Folge (die für Browser auf dem Desktop oft der Fall ist , wenn mit einer Maus Größe ändern).quelle
Ich bin seit Tagen auf dem gleichen Weg und habe herausgefunden, dass das Hinzufügen eines Ereignisses am besten funktioniert.
Fügen Sie einfach diese Zeile hinzu, nachdem Sie Ihre Funktion deklariert haben, und es wird gut funktionieren.
Ersetzen Sie drawChart durch den Namen Ihrer Funktion.
quelle
Mit der Antwort von Tiago Castro habe ich ein Liniendiagramm implementiert , um die Demonstration zu zeigen.
quelle