首页 > 代码库 > 使用jqplot创建报表(一) 初学后写的第一个案例源码

使用jqplot创建报表(一) 初学后写的第一个案例源码

一、初学后写的第一个案例源码

    效果图:


  代码如下:

   

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="common.jsp"%>
<html>
	<head>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.barRenderer.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.categoryAxisRenderer.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.dateAxisRenderer.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.highlighter.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.cursor.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.canvasTextRenderer.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/resource/jqploat/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
			<style type="text/css">
			    .jqplot-table-legend{
			         width: 80px;
			    }
			    .jqplot-highlighter{
			        font-size: 20px;
			    }
			</style>
		<script type="text/javascript">
	$(function() {
		//显示颜色
	   var areabgColor = ["#4bb2c5", "#c5b47f", "#EAA228", "#579575" ];
	   //说明文字
	   var descript = ['一次','二次','三次','四次','五次','六次','七次'];
	  //var one = [2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3];   [日期,时间]
	  var one = [[3,2],[5,3.2],[6,3],[7,2],[8,3],[9,2],[12,2],[13,3]];
	  
	  var two = [8,9,8,9,8,9,8,9,8,9,8,9,8,9,8,9,8,9];
	  var three = [12,13,13,13,12,14,14,12,13,13,12,,];

	  var four = [[8,16],[9,15],[10,16]];

       var plot = $.jqplot('chartdiv', [one,two,three,four],{
			    	    title : "example for first",
						seriesColors : areabgColor,
						stackSeries : false,
						axes:{
								label:'日期',
								xaxis:{
								   ticks:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,
										   16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
								   renderer: $.jqplot.CategoryAxisRenderer,
								   tickOptions:{
								        fontFamily: 'Georgia',
					                   showGridline:true,
					                   fontSize:14,
					                   formatString:'%d'
								   }
								},
								yaxis:{
									//自定义坐标轴与增长规则
									ticks:[[1,'7:00'],[2,'8:00'],[2.5,'8:30'],
										   [3,'9:00'],[4,'10:00'],[5,'11:00'],[5.5,'11:30'],
										   [6,'12:00'],[6.5,'12:30'],[7,'13:00'],[7.5,'13:30'],
										   [8,'14:00'],[9,'15:00'],[10,'16:00'],[11,'17:00'],
										   [11.5,'17:30'],[12,'18:00'],[12.5,'18:30'],[13,'19:00'],
										   [14,'20:00'],[15,'21:00'],[16,'22:00'],[17,'23:00'],[18,'24:00']],
									tickOptions:{
									    fontFamily: 'Georgia',
									    fontSize:12,
									    formatString:''
									}
								}
	   				  },
	   				  highlighter: {
	 		             show: true,
	 		             useAxesFormatters:false,
	 		             tooltipAxes:'',
	 		             tooltipFormatString:'%d:00',
	 		             sizeAdjust: 20,//鼠标经过高亮时,圆点的大小
	 		             formatString:'<table class="jqplot-highlighter">'+
	 				      '<tr><td>日期 : </td><td>%s日</td></tr> '+
	 				      '<tr><td>时间 : </td><td>%s:00</td></tr></table>'
	 		           },
	 		           cursor: {
	 		             show: false
	 		           },
						legend : {
							show : true,
							location : 'e',
							placement : 'outside',
							labels:descript//颜色区域的自定义文字描述
						}
                  });

       $("input[type=radio]").each(function(){
           $(this).click(function(){
                  var type = $(this).val();
                  var data = [];
                  var color = [];
                  var desc = [];
                  if(type==0){
                	  plot.replot({data:[one,two,three,four],
            	          seriesColors:areabgColor,
            	          legend:{labels:descript}});
                	  return;
                  }else if(type ==1){
               	   data.push(one);    
               	   color.push("#4bb2c5");
               	desc.push('一次');
                  }
                  else if(type ==2){
               	   data.push(two);
                	color.push("#c5b47f");
                	desc.push('二次');
                  }
                  else if(type ==3){
               	   data.push(three);
               	color.push("#EAA228");
               	desc.push('三次');
                  }
                  else if(type ==4){
               	   data.push(four);
               	color.push("#579575");
               	desc.push('四次');
                  }
                  plot.replot({data:data,
                	          seriesColors:color,
                	          legend:{labels:desc}});//报表重绘
              });
 		 });
        

		/**
		var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
		           ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
		           ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
		       var plot1 = $.jqplot('chartdiv', [line1], {
		           title:'Data Point Highlighting',
		           axes:{
		             xaxis:{
		               renderer:$.jqplot.DateAxisRenderer,
		               tickOptions:{
		    	         fontSize:14,
		                 formatString:'%b %#d'
		               }
		             },
		             yaxis:{
		               tickOptions:{
		                 formatString:'$%.2f'
		                 }
		             }
		           },
		           highlighter: {
		             show: true,
		             useAxesFormatters:true,
		             tooltipAxes:'y',
		             sizeAdjust: 20//鼠标经过高亮时,圆点的大小
		           },
		           cursor: {
		             show: false
		           }
		       });
*/

/**
		//显示颜色
		var areabgColor = ["#FFFDF6","#4bb2c5", "#c5b47f", "#EAA228", "#579575" ];

		//
		
		$.jqplot("chartdiv", [[1,3,2,4,3,2,3,4,3,2,3,4,2,3,4,3,3],[1,3,2,4,3,2,3,4,3,2,3,4,2,5,4,3,5],
		                      [1,3,2,4,3,2,3,4,3,2,3,4,2,2,4,3,5],[1,3,2,4,3,2,3,4,3,2,3,4,2,5,4,3,3]], {
			title : "example for first",
			seriesColors : areabgColor,
			stackSeries : true,
			captureRightClick: true,
			axes:{
				label:'日期',
				xaxis:{
				   ticks:[[1,' asas'],[2,' asas'],[3,' asas'],[4,' asas'],[5,' asas'],[6,' asas'],[7,'asas'],[8,'asas'],[9,'asas'],
				          [11,' asas'],[12,' asas'],[13,' asas'],[14,' asas'],[15,' asas'],[16,' asas'],[17,'asas'],[18,'asas'],[1,'asas'],
				          [11,' asas'],[11,' asas'],[11,' asas'],[1,' asas'],[1,' asas'],[1,' asas'],[1,'asas'],[1,'asas'],[1,'asas']],
				   renderer: $.jqplot.CategoryAxisRenderer,
				   tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
				   tickOptions:{
				        fontFamily: '黑体',
                        showGridline:false,
                        fontSize:'11pt',
                        angle: 70
				   }
				},
				yaxis:{
					//自定义坐标轴与增长规则
					ticks:[[1,'7:00'],[2,'8:00'],[2.5,'8:30'],
						   [3,'9:00'],[4,'10:00'],[5,'11:00'],[5.5,'11:30'],
						   [6,'12:00'],[6.5,'12:30'],[7,'13:00'],[7.5,'13:30'],
						   [8,'14:00'],[9,'15:00'],[10,'16:00'],[11,'17:00'],
						   [11.5,'17:30'],[12,'18:00'],[12.5,'18:30'],[13,'19:00'],
						   [14,'20:00'],[15,'21:00'],[16,'22:00'],[17,'23:00'],[18,'24:00']],
					tickOptions:{
					    fontFamily: 'Georgia',
					    fontSize:12,
					    formatString:''
					}
				}
		    },
			seriesDefaults : {
				renderer : $.jqplot.BarRenderer,
				rendererOptions : {
					highlightMouseDown : true,
					barWidth:14
				},
				pointLabels : {
					show : true
				}
			},
			legend : {
				show : true,
				location : 'e',
				placement : 'outside',
				labels:['ww','qq']//颜色区域的自定义文字描述
			},
			highlighter:{
				  show: true,
			      showMarker:false,
			      tooltipAxes: 'xy',
			      yvalues: 4,
			      formatString:'<table class="jqplot-highlighter">'+
			      '<tr><td>date:</td><td>%s</td></tr> '+
			      '<tr><td>open:</td><td>%s</td></tr> '+
			      '<tr><td>hi:</td><td>%s</td></tr> '+
			      '<tr><td>low:</td><td>%s</td></tr> '+
			      '<tr><td>close:</td><td>%s</td></tr></table>'
			}
		});*/
	});
</script>
	</head>
	<body>
		<center>
		    <div style="margin-top: 50px;">
		       <input type="radio" name="choise" value="0" checked="checked"/>全部  
		       <input type="radio" name="choise" value="1"/>一次  
		       <input type="radio" name="choise" value="2"/>二次  
		       <input type="radio" name="choise" value="3"/>三次  
		       <input type="radio" name="choise" value="4"/>四次  
		    </div>
			<div id="chartdiv" style="height: 600px; width: 1000px;margin-top: 40px;background: yellow;"></div>
		</center>
	</body>
</html>

      初看jqplot制作的报表,现在有两个地方需要修改:

                       1、将颜色块的说明,宽度变小;

                       2、显示高亮时,获取y坐标上的标签值,而不是设定的值;

            在这里请教一下做过这方面的高手,感激不尽!!