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

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

6 голосов
/ 20 декабря 2010

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

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

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

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

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

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

Нужно ли мневнести изменения в jqplot?Есть какие-нибудь указания?

Спасибо

1 Ответ

10 голосов
/ 20 декабря 2010

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

По сути, вам нужно создать обработчики событий для вашего графика до того, как вызовет 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]);
    }
});

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

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

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

...