图表插件--jqplot交互示例

简单交互

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

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

[javascript] view plaincopy

  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事件。因此，要处理图表点击事件，我们只需要添加如下代码即可：

[javascript] view plaincopy

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

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

[javascript] view plaincopy

  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事件时，其实是有数据传递给事件的：

[javascript] view plaincopy

  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

  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

  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。

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

[javascript] view plaincopy

  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中处理请求，展示数据即可：

时间： 2024-10-25 20:41:53

图表插件--jqplot交互示例的相关文章

图表插件--jqplot交互演示样例

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

图表插件--jqplot简单示例及参数说明

最简陋的线形图 第一步:引入必要的CSS.JS文件 [html] view plaincopy <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <!-- excanvas.js用于兼容IE浏览器 --> <!--[if lt IE 9]><script language="

jqPlot图表插件使用说明（二）

柱状图 在jqPlot图表插件使用说明(一)中,我们已经可以通过jqPlot绘制出比较简单的线形图.通过查看源代码,我们也可以看出,线形图是jqPlot默认的图表类型: /** * Class: Series * An individual data series object. Cannot be instantiated directly, but created * by the Plot oject. Series properties can be set or overriden b

图标插件--jqplot实现柱状图及饼图，表盘图示例

柱状图 在jqPlot图表插件使用说明(一)中,我们已经可以通过jqPlot绘制出比较简单的线形图.通过查看源代码,我们也可以看出,线形图是jqPlot默认的图表类型: [javascript] view plaincopy /** * Class: Series * An individual data series object.  Cannot be instantiated directly, but created * by the Plot oject.  Series proper

Web前端图表绘制JQuery插件jqplot

在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优势: 1.1.1Chart是一个基于HTML5表情按canvas来开发的纯javascript库,Chart.js(44KB)Chart.min.js(20KB),只需要引用一个文件即可搞定,用起来非常干净舒服. 1.1.2Chart可以支持六种图标类型:折线图(Line).柱形图(Bar).饼形图

推荐10款免费而优秀的图表插件

开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我在本篇文章中收集了10款免费开源且比较优秀的图表制作插件,以供各位参考. 1,ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学

Android网络(3):HttpClient作客户端,Tomcat Servlet作服务器的交互示例

前面相继介绍了Android网络编程里的Socket传输图片.HttpURLConnection,今天看HttpClient. 第一部分:JavaEE版的Eclipse配置Tomcat [备注:开发后台服务器用Eclipse的JavaEE版最好的,但单就Tomcat来说(不写jsp之类的),本文下面的服务器方面操作在普通版的Eclipse也是可以的.我这里为了和ADT-bundle分开,特意重新安个JavaEE版的Eclipse.] 1.下载Eclipse的Tomcat插件:http://www

[转载]jQuery 图表插件 jqChart 使用

jQuery 图表插件 jqChart显示效果效果非常好.支持以下几种图表: Area Bar Bubble Column Financial Chart - Candlestick Financial Chart - Stock Line Pie Radar Area Radar Line Radar Spline Area Radar Spline Scatter Spline Area Spline Stacked Column Stacked Bar 可见支持的种类非常之多.在这里我们使

jQuery HighchartsTableHTML表格转Highcharts图表插件

版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highcharts中文网所有,除非得到允许,不允许以任何形式转载! 一.关于(About) 1.简介 HighchartsTable是一款基于jQuery编写的HTML表格转换Highcharts图表的插件.利用它,你只需要关注HTML表格配置即可创建Highcharts图表! 2.运行原理 Highcha