Wie ändert man die Größe eines Flot-Diagramms, wenn sein div Größe ändert

Question

Ich benutze die Flot-Grafikbibliothek jQuery Plugin und ich habe keinen guten Weg gefunden, die Größe der Grafik zu ändern, wenn sie <div> Änderungen Größe enthält (zum Beispiel fällig Fenstergröße ändern). Bei der Verarbeitung des onresize-Ereignisses habe ich sichergestellt, dass die Breite und Höhe des enthaltenden <div> auf die richtige Größe aktualisiert wird. Anschließend wurde versucht, sowohl setupGrid aufzurufen als auch auf das Plot-Objekt zu zeichnen, aber ohne Wirkung. Ich hatte einige Erfolge mit dem Ansatz, nur das Enthaltene <div> zu entfernen und zu lesen und den Graph darin neu aufzuzeichnen. Dies scheint jedoch anfällig zu sein, in unendlichen Größenänderungs-Ereignisschleifen stecken zu bleiben, wenn ich dem Dokument gleichzeitig andere <div> Elemente hinzufügen muss (wie für Tooltips für das Diagramm), da ich vermute, dass sie auch Größenänderungs-Ereignisse auslösen können ? Gibt es einen guten Weg, damit umzugehen, dass ich vermisse?

(Ich bin auch ExplorerCanvas für IE, um in der Lage zu verwenden Flot verwenden, wenn das könnte etwas damit zu tun hat. Ich habe in allen anderen Browsern noch nicht wirklich versucht)

Answer 1

Ich habe festgestellt, nur die Bindung an die Größe Ereignis im Fenster und Aufruf Plot funktioniert wirklich gut. Zum Beispiel habe ich meine Daten und Optionen in Variablen auf der Seite gespeichert. Dann habe ich Setup diese auf $ (document) .ready():

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Answer 2

Ich scheine eine Lösung gefunden zu haben, obwohl ich nicht ganz sicher bin, warum es funktioniert. Ich benutze immer noch den Ansatz, das enthaltene <div> aus dem Dokument zu entfernen und zu lesen und den darin enthaltenen Graphen neu zu erstellen. Doch wo vorher hatte ich

window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots 

getan, die immer in anfällig zu sein schienen, wie es schien eine unendliche Schleife in Abhängigkeit davon, zu sein, was die redrawFunc auf das Dokument hat.

Stattdessen versuchte ich jQuery resize mit

$(window).resize = redrawFunc; 

Bindung Bisher egal was andere Änderungen, die ich an das Dokument zu machen in der redrawFunc Ich habe nicht hatte ein Problem mit diesem Ansatz stecken in einer Schleife noch . Ich bin mir nicht sicher warum.

Answer 3

Ich fand nur eine Lösung für diese selbst. Ich habe meinen Anruf zu $.plot() eingewickelt, so dass die ursprüngliche Ursache für mein spezifisches Problem sein kann, aber flot weigerte sich, die Größe zu ändern, selbst wenn ich das jQuery resize-Ereignis verwendete. Hier ist mein Code ändern, der alles behoben:

$(window).resize(function() { 
    // erase the flot graph, allowing the div to shrink correctly 
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div 
    $.plot($('#graph_div'), data, opts); 
}); 

Answer 4

Die neueste Version der flot API docs zumindest beschreibt ein Resize-Ereignis, das so funktioniert.

Resize()

Tells Flot der Zeichenfläche auf die Größe des Platzhalter zu ändern. Sie müssen setupGrid() und draw() danach ausführen, da Canvas-Größenänderung eine destruktive Operation ist. Dies wird intern vom resize-Plugin verwendet.

Answer 5

Der einfachste Weg ist die Verwendung des Resize-Plugins.Es wird hier gezeigt: http://www.flotcharts.org/flot/examples/resize/

Aber Sie nur

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>