Событие Flot для обновления диапазона в ответ на панорамирование / масштабирование

Question

Для Flot, есть ли событие, которое возникает после того, как пользователь завершил панорамирование или масштабирование с помощью колеса прокрутки мыши (после того, как установились range.xaxis.to/from и range.yaxis.to/from)? Я пытаюсь использовать приведенную ниже строку, чтобы обновить выделение на обзорном графике после панорамирования или масштабирования пользователем на основном графике, но обнаруживаю, что обновление панорамы обзора происходит после панорамирования или масштабирования (но не обоих).

$("#plot").bind("mouseup scroll",updateOverviewSelection);

Заранее спасибо.

Изменить: http://jsfiddle.net/apandit/nu2rr58h/9/

В jsfiddle я не могу панорамировать на основном графике, и курсор, кажется, не возвращается к нормальному. Пользователь может щелкнуть и перетащить обзорный график, чтобы сделать выбор, что приводит к увеличению основного графика. Я также хотел бы иметь возможность позволить пользователю перемещать и изменять масштаб основного графика и обновлять поле выбора на обзорном графике; Я пытаюсь сделать это, связывая updateOverviewSelection метод для сюжета div для событий прокрутки и mouseup. Есть ли во Flot событие, которое срабатывает каждый раз, когда обновляются пределы по осям X и Y?

Answer 1

Решение этой проблемы ниже. Проблема заключалась в том, что настройка выбора обзорного графика (overview.setSelection(ranges);) активировал метод масштабирования, потому что он был привязан к plotselected Событие в обзорном сюжете. В конце zoom метод, был построен основной сюжет, который снова вызывал overview.setSelection(ranges); линия в updateOverviewSelection метод. Чтобы предотвратить этот пинг-понг между двумя методами / событиями, я добавил updatingOverviewSelection флаг.

http://jsfiddle.net/apandit/nu2rr58h/12/

var datasets = [[
                    [0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
                ],
                [
                    [0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
                ]];

var plot = $.plot("#plot",datasets,{
        pan: {
          interactive: true
        },
        zoom: {
          interactive: true,
          mode: "x"
        }
    });

var overview = $.plot("#overview",datasets,{
    selection: {
        mode: "xy"
    }
});

var updatingOverviewSelection = false;

$("#plot").bind("plotpan plotzoom",updateOverviewSelection);
$("#overview").bind("plotselected", zoom);

function zoom(event,ranges) {
    if(updatingOverviewSelection) {
        updatingOverviewSelection = false;
    }
    else {
        var options = plot.getOptions();

        options.xaxes[0].min = ranges.xaxis.from;
        options.xaxes[0].max = ranges.xaxis.to;
        options.yaxes[0].min = ranges.yaxis.from;
        options.yaxes[0].max = ranges.yaxis.to;         

        plot = $.plot("#plot",datasets,options);
    }
};

// get the window x-axis and y-axis ranges for the main plot
// and set the selection in the overview plot to those ranges
function updateOverviewSelection(event) {
        var options = plot.getOptions();

        var ranges = {
            xaxis: {
                from: options.xaxes[0].min,
                to: options.xaxes[0].max
            },
            yaxis: {
                from: options.yaxes[0].min,
                to: options.yaxes[0].max
            }
        };

        updatingOverviewSelection = true;
        overview.setSelection(ranges);
};