Как изменить размер графа Flot, когда его содержащий div меняет размер

Question

Я использую плагин библиотеки графов Flot jQuery, и я не нашел хорошего способа изменить размер графика, когда он содержит <div> изменения размера (например, из-за изменения размера окна). При обработке события onresize я удостоверился, что ширина и высота содержащего <div> обновлены до правильного размера, а затем попытался вызвать и setupGrid, и нарисовать объект графика, но безрезультатно. У меня был некоторый успех с подходом простого удаления и чтения содержащего <div> и повторного построения графика в нем. Тем не менее, это кажется склонным к застреванию в бесконечных циклах изменения размера, если мне нужно добавить другие элементы <div> в документ одновременно (например, для всплывающих подсказок для графика), так как я предполагаю, что они могут вызывать события изменения размера также? Есть ли хороший способ справиться с этим, что мне не хватает?

(я также использую ExplorerCanvas для IE, чтобы иметь возможность использовать Flot, если это может иметь какое-либо отношение к нему. Я еще не пробовал в других браузерах)

Answer 1

Я нашел только привязку к событию изменения размера в окне, и вызов графика работает очень хорошо. Например, мои данные и опции хранятся в переменных на странице. Затем я устанавливаю это на $ (document) .ready ():

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

Answer 2

Последняя версия документов flot API , по крайней мере, описывает событие изменения размера, которое работает так, как объявлено.

изменение размера ()

Сообщает Flot изменить размер холста для рисования до размера заполнитель. Вам нужно запустить setupGrid () и draw () после этого как Изменение размера холста - разрушительная операция. Это используется внутренне с помощью плагина изменения размера.

Answer 3

Самый простой способ - использовать плагин изменения размера. Это продемонстрировано здесь: http://www.flotcharts.org/flot/examples/resize/

Но вы просто добавляете

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

Answer 4

Я сам нашел решение этой проблемы. Я завернул свой вызов на $.plot(), так что это может быть исходной причиной моей конкретной проблемы, но flot отказался своевременно изменять размер, даже когда я использовал событие jQuery resize. Вот мое изменение кода, которое исправило все:

$(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 5

Кажется, я нашел решение, хотя я не совсем уверен, почему оно работает. Я все еще использую подход удаления и чтения содержащего <div> из документа и повторного построения графика в нем. Однако, где раньше я делал

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

, который, казалось, был склонен попадать в то, что казалось бесконечным циклом, в зависимости от того, что redrawFunc сделал с документом.

Вместо этого я попытался использовать привязку изменения размера jQuery

$(window).resize = redrawFunc;

До сих пор, независимо от того, какие другие изменения я делаю в документе в redrawFunc, у меня еще не было проблем с этим подходом, пока он не зацикливался. Я просто не знаю почему.