zoukankan      html  css  js  c++  java

  • 图表插件--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="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 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=" 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则为触发事件的图表对象。

    有了这些数据，我们就能够在事件处理函数中使用它们。用法也非常easy，仅仅须要给四个參数到事件处理函数，这些数据就会自己主动注入到各个參数中。例如以下：
    [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. });  

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

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

    更精细的事件交互

    在大多数情况下，当我们真的有需求要处理图表的点击事件时，通常我们希望可以处理被点的数据点而非整个图表。同一时候在处理PV数据点的事件时，我们肯定也希望可以从点击事件中知道，当前点击的究竟是哪个数据点，这个数据点的取值是什么。先来看一张图表：
    [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=" 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中处理请求，展示数据就可以：
  • 相关阅读:
    POJ 1141 Brackets Sequence (区间DP)
    UVaLive 6585 && Gym 100299F Draughts (暴力+回溯)
    UVaLive 6950 && Gym 100299K Digraphs (DFS找环或者是找最长链)
    UVaLive 6588 && Gym 100299I (贪心+构造)
    UVa 1611 Crane (构造+贪心)
    Gym 100299C && UVaLive 6582 Magical GCD (暴力+数论)
    UVa 1642 Magical GCD (暴力+数论)
    UVaLive 6591 && Gym 100299L Bus (水题)
    UVaLive 6581 && Gym 100299B What does the fox say? (模拟+STL)
    HDU 5898 odd-even number (数位DP)
  • 原文地址：https://www.cnblogs.com/zfyouxi/p/4006806.html
Copyright © 2011-2022 走看看