dygraphs div nicht sichtbar bis Browser Inspektionsfenster geöffnet oder Browser Größe ändern

Question

Das hat mich für eine Woche geplagt, also musste ich nach SO kommen. (Verzeihen Sie die URL, es ist ein Dev-Server). http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34

Wenn ich auf das Foto klicke, sollte das Popup mit Liniendiagramm erscheinen, aber in Wirklichkeit ist das Liniendiagramm nicht sichtbar. Es kann nur angezeigt werden, nachdem die Größe des Fensters geändert oder das Browser-Inspektionsfenster geöffnet wurde.

Wie kann ich das beheben?

Diese Methode nicht <script> var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", { animatedZooms: true }); $(document).ready(function() { graph.resize(800, 500) }); </scrip>

Answer 1

// These will be zero if the dygraph's div is hidden. In that case, 
    // use the user-specified attributes if present. If not, use zero 
    // and assume the user will call resize to fix things later. 
    this.width_ = div.clientWidth || attrs.width || 440; 
    this.height_ = div.clientHeight || attrs.height ||320; 

Answer 2

Dies ist ein known issue dass comes up von Zeit zu Zeit arbeiten. Wenn ein <div> unsichtbar ist, dann hat es keine genau definierte Höhe oder Breite. Das Rendern eines Diagramms macht also nichts Sinnvolles (es hat keine Höhe). dygraphs hat keine Möglichkeit zu wissen, dass das Diagramm <div> sichtbar geworden ist. Das ist wirklich eine Lücke in der DOM Events API. Andere Bibliotheken wie Google Maps haben ähnliche Probleme.

Abhilfen sind:

• Sie .resize() ohne Parameter aufrufen können einen Neuaufbau zu erzwingen, wenn das Popup erscheint.
• Sie können das Diagramm erstellen, wenn das Popup angezeigt wird, anstatt beim Laden der Seite. Auf diese Weise hat das Diagramm <div> eine Größe, wenn das Diagramm gerendert wird.
• Sie können die Höhe und Breite explizit entweder im Konstruktor dygraphs oder als Stile im Diagramm <div> zuweisen.