图表插件--jqplot交互示例

在之前的学习中，我们已经可以绘制各种类型的图表，也可以给图表添加不同的组件，如标题、图例等等。但这些图表只能用于展示数据，一旦希望对图表有所操作——比如查看数据明细——就显得束手无策了。其实jqPlot是提供了图表事件交互功能的，且实现起来，也相当的简单。接下来我们要做的就是，学习如果监听图表事件，并对事件进行处理。

在jqPlot的源码中，我们能够看到这样的代码片段：

可以看出，我们不能直接给画布绑定一些诸如click、mouseover之类的常规事件。如果要处理这些事件，我们要做的应该是绑定jqplotClick事件，当我们触发点击事件时，图表会自动帮我们触发画布的jqplotClick事件。因此，要处理图表点击事件，我们只需要添加如下代码即可：

我们先来绘制一个简单的线形图表，在此图表上添加相关的交互事件：

在此图表上，我们点击任何位置，都可以看到如下结果：

虽然前面的代码已经可以处理图表的一些事件，但对于一个应用程序来说，没有数据是没有多大意义的。上面的事件处理，我们无法从事件中取得任何数据，因此事件触发时所能做的也就有限。但是如果仔细观察前面this.onClick函数，我们不难发现，在触发jqplotClick事件时，其实是有数据传递给事件的：

在这行代码的前面，我们可以知道这些传递的数据究竟是什么意思。其中，position.gridPos是指鼠标点击位置相对于整个Grid对象的坐标位置，它是一个点对象，包含x和y两个属性；position.dataPos表示鼠标点击位置在数据区域所对应各个轴的取值，它也是一个对象，不过包含的属性则为xaxis、x2axis、yaxis、y2axis、y3axis、y4axis、y5axis、y6axis、y7axis、y8axis、y9axis以及yMidAxis；neighbor则为事件源数据，这里为空；参数p则为触发事件的图表对象。

有了这些数据，我们就可以在事件处理函数中使用它们。使用方法也很简单，只需要给四个参数到事件处理函数，这些数据就会自动注入到各个参数中。如下：

如上，当我们再去点击图表时，图表中的数据线段就会变成红色，如下图效果：

假设我们的页面中有若干个图表，我们可以使用这种方式，去模拟图表选中效果。当然，合理的应用事件传递的数据，还能做出其他更多更好的效果。

在大多数情况下，当我们真的有需求要处理图表的点击事件时，通常我们希望能够处理被点的数据点而非整个图表。同时在处理点击数据点的事件时，我们肯定也希望能够从点击事件中知道，当前点击的到底是哪个数据点，这个数据点的取值是什么。先来看一张图表：

效果图：

在这张图表中，数据表示的是博客《jqPlot图表插件使用说明》的每日阅读数趋势。可以看出，6月23日阅读人数是75次，6月24日是69次等等。在实际业务需求中，更大可能是在点击75这个点的时候，我们要展示这75个读者的详细列表，查看他们到底是哪些读者。这个时候，我们就得在事件处理中，判断点击的是哪一个点，这个点对应的日期是哪天。显然，如果只是给图表绑定点击事件，这种数据是无法取到的。

这个时候就要关注更为精细的交互了。除了图表整体的交互事件，jqPlot还可以在数据序列上注册事件。与图表事件不同的是，只有鼠标点击在数据节点上时，事件才会被触发。另外，与图表事件相比，数据序列上的事件名称会也不同，通常以“jqplotData”开头，后接事件类型。如jqplotDataClick、jqplotDataMouseover等等；数据序列中事件处理函数接收到的参数含义也有区别，第一个参数gridPos是指被点击的数据点在当前网格中的下标。单条线的图表取值都是0，只有当同时存在多条线时，才能分辩出来。dataPos是指被点击的数据点在所有数据点中的位置下标，比如途中点击第一个点75时，dataPos就是0，点击69时，dataPos就是1，依此类推。neighbor则保存着被点的数据点的数据信息，它是一个数组，其中第一个元素是ticks的下标，第二个元素是该点对应的值，比如第一个点的值是75。最后一个参数plot仍代表当前点击图表对象，但在点击序列点时，貌似没有传入这个参数，所以会是undefined。

如上代码中是监听数据序列的点击事件，稍作修改如下：

这样，我们就只需要根据传递的日期，在getReader.action中处理请求，展示数据即可：