6

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

它的插件(如荧光笔、可拖动和光标)通过将自己添加到 jqplot.eventListenerHooks (eventListenerHooks.push(['jqplotClick', callback]); 例如。或'jqplotMouseDown'或者这样也可以。

在用通常的 $.jqplot(target, data, options); 制作我的情节之后 然后我这样做

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

果然 myFunc 在我点击绘图的任何地方都会被调用,使用event,和. 邻居是最有趣的,如果点击它,它包含我的数据点。这是我需要在gridpos附近弹出一个带有数据点附加信息的数据。neighbourdataposgridpos

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

我需要对 jqplot 进行更改吗?有什么方向吗?

谢谢

4

1 回答 1

10

这没有详细记录,但您可以在此处找到有关它的讨论。

基本上,在调用 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/

希望有帮助!

于 2010-12-20T17:34:39.867 回答