Как связать событие только с одним объектом? jqplot

Я использую jqplot для рисования некоторых диаграмм. Это отличный инструмент, но ему не хватает простой опции обработчика кликов для каждой диаграммы.

Его плагины, такие как маркер, перетаскивание и курсор, регистрируют свою заинтересованность в захвате событий щелчка/мыши с холста jqplot, добавляя себя в jqplot.eventListenerHooks (eventListenerHooks.push(['jqplotClick', callback]); например, или 'jqplotMouseDown' или такие тоже есть.

После создания моего графика с помощью обычного $.jqplot(target, data, options); тогда я делаю это

$.jqplot.eventListenerHooks.push(['jqplotClick', myFunc]);

и, конечно же, myFunc вызывается везде, где я нажимаю на график, с event, neighbour, datapos и gridpos. Сосед самое интересное, в нем есть моя точка данных, если на него был клик. Это данные, которые мне нужны, чтобы сделать всплывающее окно рядом с gridpos с дополнительной информацией о точке данных.

Но проблема в том, что если у меня есть две диаграммы на одной странице и я хочу зарегистрировать разные обратные вызовы для каждого jqplot. Как и сейчас, когда я регистрирую второй myFunc2, все клики на втором графике также проходят через myFunc!

Нужно ли вносить изменения в jqplot? Любые направления, что угодно?

Спасибо


person rapadura    schedule 20.12.2010    source источник


Ответы (1)


Это плохо задокументировано, но вы можете найти обсуждение по этому поводу здесь.

По сути, вам нужно создать обработчики событий для диаграммы до вызова jqplot для создания фактической диаграммы. Для этого вам нужно сделать что-то вроде этого:

var handler = function(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
};

$.jqplot.eventListenerHooks.push(['jqplotClick', handler]);

Это всего лишь простой обработчик событий, который проверяет, есть ли соседняя точка данных рядом с тем местом, где вы щелкнули. См. рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/PtyFG/

Обновление: если вы хотите прослушивать только события на определенном графике, вы можете сделать что-то вроде этого:

var handler = function(ev, gridpos, datapos, neighbor, plot) {
    if (plot.targetId === "#chartdiv") {
        if (neighbor) {
            alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
        }
    }
    else if (plot.targetId === "#chart2div") {
        ....
    }
    // etc...
};

Где вы должны заменить #chartdiv любым идентификатором диаграммы, для которой вы хотите прослушивать события. Пример обновлен.

Обновление 2: похоже, что вы можете использовать обычное событие bind с сюжетными событиями:

$("#chartdiv").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    if (neighbor) {
        alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
});

Пример использования этого метода с 2 диаграммами:

http://jsfiddle.net/andrewwhitaker/PtyFG/5/

Надеюсь, это поможет!

person Andrew Whitaker    schedule 20.12.2010
comment
Спасибо, Андрей! Я уточнил свой вопрос, пока вы отвечали, я разобрался с этим, и он отлично работает, если у вас есть время, см. Мой пост выше. Как мне сделать для двух диаграмм, у каждой из которых есть другой обработчик? О, и спасибо за ссылки! Проверьте их сейчас. - person rapadura; 20.12.2010
comment
Ах! Я думал об этом, но это кажется не очень красивым решением. Событие распространяется на обе диаграммы. Сейчас я смотрю на bitbucket.org/cleonello/jqplot/src/a806b42e34e2/ примеры/ пытаемся заставить его работать... - person rapadura; 20.12.2010
comment
Гах! Кажется, что DateAxisRenderer, который я использую, не имеет handleClick. - person rapadura; 20.12.2010
comment
Спасибо Андрей!! Я запутался в привязке к jqplotDataClick. Дох! - person rapadura; 20.12.2010
comment
@AntonioP: Нет проблем, рад, что смог помочь. - person Andrew Whitaker; 20.12.2010