dygraphs div не отображается до тех пор, пока браузер не откроется окно инспекции или не изменится размер браузера

Question

Это настигло меня на неделю, поэтому я должен был прийти к SO. (Простите URL-адрес, это dev-сервер). http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34

Когда я нажимаю на фотографию, появляется всплывающее окно с линейной линией, но на самом деле строка не виден. Он может быть виден только после изменения размера окна или открытия окна просмотра браузера.

Как это исправить?

Этот метод не работают <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

Это known issue что comes up время от времени. Если <div> невидим, то он не имеет четко определенной высоты или ширины. Поэтому рендеринг диаграммы в нем не делает ничего полезного (он имеет нулевую высоту). dygraphs не имеет возможности узнать, что диаграмма <div> стала видимой. Это действительно пробел в API DOM Events. Аналогичные проблемы имеют и другие библиотеки, такие как Google Maps.

обходные являются:

• Вы можете вызвать .resize() без каких-либо параметров, чтобы заставить перерисовать, когда появится всплывающее окно.
• Вы можете создать график, когда появится всплывающее окно, а не на загрузке страницы. Таким образом, диаграмма <div> будет иметь размер при визуализации графика.
• Вы можете назначить высоту и ширину явно, либо в конструкторе dygraphs, либо в виде стилей на диаграмме <div>.