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

本文介绍了如何将事件与仅一个对象相关联?jqplot的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

Im using jqplot to draw some charts. It is a great tool, but it lacks a simple clickhandler option for each chart.

它的插件，如荧光笔、可拖动和光标，通过将自己添加到 jqplot.eventListenerHooks (eventListenerHooks.push(['jqplotClick', callback]); 来记录他们对从 jqplot 画布捕获单击/鼠标事件的兴趣.'jqplotMouseDown' 等也可用.

Its plugins like highlighter, draggable and cursor register their interest in capturing click/mouse-events from the jqplot canvas by adding themselves to jqplot.eventListenerHooks (eventListenerHooks.push(['jqplotClick', callback]); for example. or 'jqplotMouseDown' or such are also available.

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

After making my plot with the usual $.jqplot(target, data, options); then I do this

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

果然无论我在哪里点击绘图，myFunc 都会被调用，使用 event、neighbour、datapos 和 gridpos.邻居是最有趣的，如果点击它，它包含我的数据点.这是我需要在 gridpos 附近弹出一个带有数据点附加信息的数据.

and sure enough myFunc gets called wherever I click on the plot, with event, neighbour, datapos and gridpos. Neighbour is the most interesting, it contains my data point if there was a click on it. This is the data I need to make a popup close to the gridpos with aditional information on the datapoint.

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

But the problem is if I have two charts on the same page and want to register different callbacks for each jqplot. As it is now, when I register the second myFunc2, all the clicks on the second plot go through the myFunc aswell!

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

Do I need to make changes to jqplot? Any directions, whatsoever?

谢谢

推荐答案

这不是很好的文档，但你可以找到关于它的讨论 这里.

This isn't well-documented, but you can find a discussion about it here.

基本上，您需要为图表创建事件处理程序在调用 jqplot 以创建实际图表.为此，您需要执行以下操作:

Basically, you need to create event handlers for your chart before calling jqplot to create the actual chart. To do that, you need to do something like this:

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

这只是一个简单的事件处理程序，用于检查您单击的位置附近是否有相邻的数据点.在此处查看一个工作示例:jsfiddle/andrewwhitaker/PtyFG/

That's just a simple event handler that checks to see if there's a neighboring data point near where you clicked. See a working example here: jsfiddle/andrewwhitaker/PtyFG/

更新:如果你只想听某个情节上的事件，你可以这样做:

Update: If you want to only listen to events on a certain plot, you could do something like this:

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.示例已更新.

Where you would replace #chartdiv with whatever the Id of the chart you want to listen to events for is. The example has been updated.

更新 2: 看起来您可以将常规 bind 事件与情节事件一起使用:

Update 2: Looks like you can use a regular bind event with the plot events:

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

使用此方法的示例，带有 2 个图表:

Example using this method, with 2 charts:

jsfiddle/andrewwhitaker/PtyFG/5/

希望有帮助！