首页 > 代码库 > 图表插件--jqplot交互示例

图表插件--jqplot交互示例

简单交互

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

在jqPlot的源码中,我们能够看到这样的代码片段:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. **  
  2.  * Class: jqPlot  
  3.  * Plot object returned by call to $.jqplot.  Handles parsing user options,  
  4.  * creating sub objects (Axes, legend, title, series) and rendering the plot.  
  5.  */  
  6. function jqPlot() {  
  7.        
  8.     ...其它代码  
  9.        
  10.     // 方法:draw  
  11.     // 绘制所有的块节点到图表容器中,绘制之前不会清空容器  
  12.     this.draw = function(){  
  13.            
  14.         ...其它代码  
  15.         // 给注册的事件绑定事件处理器  
  16.         this.bindCustomEvents();  
  17.         ...其它代码  
  18.     }  
  19.        
  20.     ...其它代码  
  21.     this.bindCustomEvents = function() {  
  22.         // 给图表容器(指chart1这个div)绑定点击事件处理函数,其它类似  
  23.         this.eventCanvas._elem.bind(‘click‘, {plot:this}, this.onClick);  
  24.         this.eventCanvas._elem.bind(‘dblclick‘, {plot:this}, this.onDblClick);  
  25.         this.eventCanvas._elem.bind(‘mousedown‘, {plot:this}, this.onMouseDown);  
  26.         this.eventCanvas._elem.bind(‘mousemove‘, {plot:this}, this.onMouseMove);  
  27.         this.eventCanvas._elem.bind(‘mouseenter‘, {plot:this}, this.onMouseEnter);  
  28.         this.eventCanvas._elem.bind(‘mouseleave‘, {plot:this}, this.onMouseLeave);  
  29.         if (this.captureRightClick) {  
  30.             this.eventCanvas._elem.bind(‘mouseup‘, {plot:this}, this.onRightClick);  
  31.             this.eventCanvas._elem.get(0).oncontextmenu = function() {  
  32.                 return false;  
  33.             };  
  34.         }  
  35.         else {  
  36.             this.eventCanvas._elem.bind(‘mouseup‘, {plot:this}, this.onMouseUp);  
  37.         }  
  38.     };  
  39.     // 点击事件处理函数,另有其它如onDblClick、onMouseDown、onMouseMove等  
  40.     this.onClick = function(ev) {  
  41.         // 传入标准化的Event对象,会携带一些数据属性  
  42.         // 传出非标准化Event对象  
  43.         var positions = getEventPosition(ev);  
  44.         var p = ev.data.plot;  
  45.         var neighbor = checkIntersection(positions.gridPos, p);  
  46.         // 获取jqplotClick事件  
  47.         var evt = $.Event(‘jqplotClick‘);  
  48.         evt.pageX = ev.pageX;  
  49.         evt.pageY = ev.pageY;  
  50.         // 关键代码,触发jqplotClick事件,并传递一些数据  
  51.         $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);  
  52.     };  
  53.     ...其它代码  
  54. }  

可以看出,我们不能直接给画布绑定一些诸如click、mouseover之类的常规事件。如果要处理这些事件,我们要做的应该是绑定jqplotClick事件,当我们触发点击事件时,图表会自动帮我们触发画布的jqplotClick事件。因此,要处理图表点击事件,我们只需要添加如下代码即可:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. $(‘#chart1‘).on(‘jqplotClick‘function(){  
  2.     // 事件处理代码  
  3. });  

我们先来绘制一个简单的线形图表,在此图表上添加相关的交互事件:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>图表事件交互</title>  
  6.         <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"js/jqPlot/1.0.4/jquery.jqplot.min.css"/>  
  7.         <!--[if lt IE 9]>  
  8.             <script language="javascript" type="text/javascript" src=http://www.mamicode.com/"js/jqPlot/1.0.4/excanvas.js"></script>  
  9.         <![endif]-->  
  10.         <script src=http://www.mamicode.com/"http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
  11.         <script src=http://www.mamicode.com/"js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
  12.         <script type="text/javascript" charset="utf-8">  
  13.             $(function(){  
  14.                 $.jqplot(‘chart1‘, [[75, 69, 71, 77, 76, 81, 73]]);  
  15.                    
  16.                 // 如前所述,添加事件处理  
  17.                 $(‘#chart1‘).on(‘jqplotClick‘function(){  
  18.                      alert(‘图表点击事件被触发...‘);  
  19.                 });  
  20.             });  
  21.         </script>  
  22.     </head>  
  23.     <body>  
  24.         <div id="chart1" style="width: 800px;height: 400px;">  
  25.             <!--  
  26.                 描述:图表展示区域  
  27.             -->  
  28.         </div>  
  29.     </body>  
  30. </html>  

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

携带数据的交互处理

虽然前面的代码已经可以处理图表的一些事件,但对于一个应用程序来说,没有数据是没有多大意义的。上面的事件处理,我们无法从事件中取得任何数据,因此事件触发时所能做的也就有限。但是如果仔细观察前面this.onClick函数,我们不难发现,在触发jqplotClick事件时,其实是有数据传递给事件的:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);  

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

有了这些数据,我们就可以在事件处理函数中使用它们。使用方法也很简单,只需要给四个参数到事件处理函数,这些数据就会自动注入到各个参数中。如下:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. // 第一个参数是Event对象,其余四个参数分别对应position.gridPos、position.dataPos、neighbor和p  
  2. $(‘#chart1‘).on(‘jqplotClick‘function(ev, gridpos, datapos, neighbor, plot){  
  3.     plot.replot({  
  4.         seriesDefaults:{  
  5.             color:‘#ff0000‘  
  6.         }  
  7.     });  
  8. });  

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

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

更精细的事件交互

在大多数情况下,当我们真的有需求要处理图表的点击事件时,通常我们希望能够处理被点的数据点而非整个图表。同时在处理点击数据点的事件时,我们肯定也希望能够从点击事件中知道,当前点击的到底是哪个数据点,这个数据点的取值是什么。先来看一张图表:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>图表事件交互</title>  
  6.         <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>  
  7.         <!--[if lt IE 9]>  
  8.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
  9.         <![endif]-->  
  10.         <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
  11.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
  12.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>  
  13.         <script type="text/javascript" charset="utf-8">  
  14.             $(function(){  
  15.                 var chart = $.jqplot(‘chart1‘, [[75, 69, 71, 77, 76, 81, 73]], {  
  16.                     title:‘《jqPlot图表插件使用说明》日阅读数趋势图‘,  
  17.                     axes:{          // 具体坐标轴属性  
  18.                         xaxis:{  
  19.                             label:‘日期‘,  
  20.                             ticks:[[0,‘06/22‘], [1,‘06/23‘], [2,‘06/24‘],   
  21.                                    [3,‘06/25‘], [4,‘06/26‘], [5,‘06/27‘],   
  22.                                    [6,‘06/28‘], [7,‘06/29‘], [8,‘06/30‘]  
  23.                                   ]  
  24.                         },  
  25.                         yaxis: {  
  26.                             label: ‘阅读数‘  
  27.                         }  
  28.                     },   
  29.                     seriesDefaults:{  
  30.                         pointLabels: {  // 显示数据点,依赖于jqplot.pointLabels.min.js文件  
  31.                             show: true  
  32.                         }  
  33.                     }  
  34.                 });  
  35.                    
  36.                 $(‘#chart1‘).on(‘jqplotDataClick‘, function(ev, gridpos, datapos, neighbor, plot){  
  37.                      // 事件处理代码  
  38.                 });  
  39.             });  
  40.         </script>  
  41.     </head>  
  42.     <body>  
  43.         <div id="chart1" style="width: 800px;height: 400px;">  
  44.             <!-- 
  45.                 描述:图表展示区域 
  46.             -->  
  47.         </div>  
  48.     </body>  
  49. </html>  

效果图:

在这张图表中,数据表示的是博客《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。

如上代码中是监听数据序列的点击事件,稍作修改如下:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. $(‘#chart1‘).on(‘jqplotDataClick‘function(ev, gridpos, datapos, neighbor, plot){  
  2.     // 获取标签下标  
  3.     var tickIndex = neighbor[0];  
  4.     // 获取标签值(日期)  
  5.     var date = chart.axes.xaxis.ticks[tickIndex][1];  
  6.     // 拼接查询url  
  7.     var url = ‘getReaders.action?date=‘ + encodeURIComponent(date);  
  8.     // 跳转url  
  9.     window.location.href = url;  
  10. });  

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

图表插件--jqplot交互示例