如何将一个事件仅与一个对象关联？ jqplot

Question

我使用 jqplot 绘制一些图表。它是一个很棒的工具，但它缺少每个图表的简单点击处理程序选项。

它的插件（如荧光笔、可拖动和光标）通过将自身添加到 jqplot.eventListenerHooks（eventListenerHooks.push（['jqplotClick'，callback]）; 例如。或 'jqplotMouseDown' 来注册从 jqplot 画布捕获点击/鼠标事件的兴趣。 的也可用。

或这样 然后我这样做

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

果然，无论我点击绘图，myFunc 都会被调用，并带有 event 、neighbour、datapos 和 gridpos。邻居是最有趣的，如果点击它，它包含我的数据点。这是我需要在网格位置附近创建一个弹出窗口并包含有关数据点的附加信息的数据。

但问题是，如果我在同一页面上有两个图表，并且想要为每个 jqplot 注册不同的回调。现在，当我注册第二个 myFunc2 时，第二个图上的所有点击也都会通过 myFunc！

我需要对 jqplot 进行更改吗？有什么指示吗？

谢谢

Answer 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 替换为您想要监听的图表的 ID的事件。该示例已更新。

更新 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/

希望有帮助！