简单交互

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

在jqPlot的源代码中,我们可以看到这种代码片段:
  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. // 方法:draw
  9. // 绘制全部的块节点到图表容器中,绘制之前不会清空容器
  10. this.draw = function(){
  11. ...其他代码
  12. // 给注冊的事件绑定事件处理器
  13. this.bindCustomEvents();
  14. ...其他代码
  15. }
  16. ...其他代码
  17. this.bindCustomEvents = function() {
  18. // 给图表容器(指chart1这个div)绑定点击事件处理函数,其他类似
  19. this.eventCanvas._elem.bind('click', {plot:this}, this.onClick);
  20. this.eventCanvas._elem.bind('dblclick', {plot:this}, this.onDblClick);
  21. this.eventCanvas._elem.bind('mousedown', {plot:this}, this.onMouseDown);
  22. this.eventCanvas._elem.bind('mousemove', {plot:this}, this.onMouseMove);
  23. this.eventCanvas._elem.bind('mouseenter', {plot:this}, this.onMouseEnter);
  24. this.eventCanvas._elem.bind('mouseleave', {plot:this}, this.onMouseLeave);
  25. if (this.captureRightClick) {
  26. this.eventCanvas._elem.bind('mouseup', {plot:this}, this.onRightClick);
  27. this.eventCanvas._elem.get(0).oncontextmenu = function() {
  28. return false;
  29. };
  30. }
  31. else {
  32. this.eventCanvas._elem.bind('mouseup', {plot:this}, this.onMouseUp);
  33. }
  34. };
  35. // 点击事件处理函数,另有其他如onDblClick、onMouseDown、onMouseMove等
  36. this.onClick = function(ev) {
  37. // 传入标准化的Event对象,会携带一些数据属性
  38. // 传出非标准化Event对象
  39. var positions = getEventPosition(ev);
  40. var p = ev.data.plot;
  41. var neighbor = checkIntersection(positions.gridPos, p);
  42. // 获取jqplotClick事件
  43. var evt = $.Event('jqplotClick');
  44. evt.pageX = ev.pageX;
  45. evt.pageY = ev.pageY;
  46. // 关键代码,触发jqplotClick事件,并传递一些数据
  47. $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
  48. };
  49. ...其他代码
  50. }

能够看出,我们不能直接给画布绑定一些诸如click、mouseover之类的常规事件。假设要处理这些事件,我们要做的应该是绑定jqplotClick事件,当我们触发点击事件时,图表会自己主动帮我们触发画布的jqplotClick事件。因此,要处理图表点击事件,我们仅仅须要加入例如以下代码就可以:

  1. $('#chart1').on('jqplotClick', function(){
  2. // 事件处理代码
  3. });

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

  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. $('#chart1').on('jqplotClick', function(){
  17. alert('图表点击事件被触发...');
  18. });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div id="chart1" style="width: 800px;height: 400px;">
  24. <!--
  25. 描写叙述:图表展示区域
  26. -->
  27. </div>
  28. </body>
  29. </html>

在此图表上,我们点击不论什么位置,都能够看到例如以下结果:


携带数据的交互处理

尽管前面的代码已经能够处理图表的一些事件,但对于一个应用程序来说,没有数据是没有多大意义的。上面的事件处理,我们无法从事件中取得不论什么数据,因此事件触发时所能做的也就有限。可是假设细致观察前面this.onClick函数,我们不难发现,在触发jqplotClick事件时,事实上是有数据传递给事件的:
  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,仅仅须要给四个參数到事件处理函数,这些数据就会自己主动注入到各个參数中。例如以下:
  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数据点的事件时,我们肯定也希望可以从点击事件中知道,当前点击的究竟是哪个数据点,这个数据点的取值是什么。先来看一张图表:
  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. $('#chart1').on('jqplotDataClick', function(ev, gridpos, datapos, neighbor, plot){
  36. // 事件处理代码
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <div id="chart1" style="width: 800px;height: 400px;">
  43. <!--
  44. 描写叙述:图表展示区域
  45. -->
  46. </div>
  47. </body>
  48. </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。

如上代码中是监听数据序列的点击事件,稍作改动例如以下:
  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交互演示样例的更多相关文章

  1. AppCan移动应用开发平台新增9个超有用插件(内含演示样例代码)

    使用AppCan平台进行移动开发.你所须要具备的是Html5+CSS +JS前端语言基础.此外.Hybrid混合模式应用还需结合原生语言对功能模块进行封装,对于没有原生基础的开发人员,怎样实现App里 ...

  2. Android网络(3):HttpClient作client,Tomcat Servlet作server的交互演示样例

    前面相继介绍了Android网络编程里的Socket传输图片.HttpURLConnection,今天看HttpClient. 第一部分:JavaEE版的Eclipse配置Tomcat [备注:开发后 ...

  3. Eureka 的 Application Client client的执行演示样例

            上篇以一个 demo 演示样例介绍了 Eureka 的 Application Service 客户端角色.今天我们继续了解 Eureka 的 Application Client 客 ...

  4. 图标插件--jqplot实现柱状图及饼图,表盘图演示样例

    柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...

  5. Grunt经常使用插件及演示样例说明

    下述给出了经常使用Grunt插件,并列举了部分插件演示样例: 插件名称 说明 Github地址 grunt-contrib-clean 清空文件和目录 https://github.com/grunt ...

  6. Androidclient与服务端交互之登陆演示样例

    今天了解了一下androidclient与服务端是如何交互的,发现事实上跟web有点类似吧,然后网上找了大神的登陆演示样例.是基于IntentService的 1.后台使用简单的servlet,支持G ...

  7. JDBC连接MySQL数据库及演示样例

    JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...

  8. 构造Scala开发环境并创建ApiDemos演示样例项目

    从2011年開始写Android ApiDemos 以来.Android的版本号也更新了非常多,眼下的版本号已经是4.04. ApiDemos中的样例也添加了不少,有必要更新Android ApiDe ...

  9. JBoss 系列九十九:Rest WebService jBPM 6 集成演示样例

    概述 jBPM 6 提供 Rest API 供第三方应用整合使用 jBPM 6,本文演示假设通过 Rest API: 启动流程 获取流程实例信息 启动 User Task 完毕 User Task j ...

随机推荐

  1. nyoj 42

    #include <iostream> #include <stdio.h> #include <cstring> #include <algorithm&g ...

  2. linux的sudo apt-get install 和dpkg -i <package.deb>命令

    ubuntu统一的安装软件命令 sudo apt-get install ** sudo dpkg -i <package.deb>

  3. SQL 查询字段为值不为空

      方法一sql="select   *   from   table   where   id<>null   "     or   sql="select ...

  4. 执​行​o​r​a​c​l​e​函​数​的​四​种​方​法

    1.在定义函数时:如果有参数,则参数可有类型但是不加长度. 2.在执行函数: var/variable var_name var_type(如果数据类型是number则没有长度,如果数据类型是varc ...

  5. linux学习笔记<基本知识普及>

    linux上分区类型 主分区 : 最多自能有4个 扩展分区 :  最多只能有1个 主分区加扩展分区最多只能有4个 不能写入数据,只能包含逻辑分区 逻辑分区 挂载(安装linux系统时若自定义分区,需注 ...

  6. 武汉科技大学ACM :1006: A+B for Input-Output Practice (VI)

    Problem Description Your task is to calculate the sum of some integers. Input Input contains multipl ...

  7. Eclipse搭建struts2环境

    搭建struts2环境 大的方面分为三步: 1. 加入jar包 2. 在web.xml中配置struts2 3. 添加struts2的配置文件struts.xml 下面是详细步骤: 1. 新建一个Dy ...

  8. java对象初级知识

    this属于类 方法中没有自己的this指针(本来以为js方法中有,其实并没有里,那是被new出来的function 在声明的时候可以赋初值: int a =12 但不能   int a  ;   a ...

  9. PHP微信红包的算法实现探讨

    header("Content-Type: text/html;charset=utf-8");//输出不乱码,你懂的 $total=10;//红包总额 $num=8;// 分成8 ...

  10. bat命令中的变量声明及使用

    在bat文件中声明变量的方式如下: set xxx_variant_name=yyyyyyyyyyyy move D:\abc\efg\test.txt %xxx_variant_name%\test ...