`
wesker0918
  • 浏览: 42854 次
  • 性别: Icon_minigender_1
  • 来自: 山东->北京
社区版块
存档分类
最新评论

JavaScript报表

阅读更多
<%@ page language="java" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
 	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%=basePath%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
  		<title>JavaScript绘图</title>
  		<script language="JavaScript">   
     		IE4 = !(navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")   
			var xo=0
			var yo=0
			var Ox = -1   
			var Oy = -1
			var rad = Math.PI/180
			var maxY = 400
			var color = "red"
    
			function print(str){   
				document.write(str)   
			}   
    
			function orgY(y){   
				return maxY-y   
			}
        
			function outPlot(x,y,w,h){   
				print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')   
			}   
    
			function Plot(x,y){   
				outPlot(x,y,1,1)   
				if(Ox >= 0 || Oy>=0){   
					ShowLine(Ox,Oy,x-Ox,y-Oy)   
				}   
				Ox = x   
				Oy = y   
			}   
    
			function ShowLine(x,y,w,h){   
				if(w<0){
					x += w
					w = Math.abs(w)
				}   
			
				if(h<0){   
					y += h   
					h = Math.abs(h)
				}
				   
				if(w<1) w=1   
				if(h<1) h=1   
				outPlot(x,y,Math.round(w),Math.round(h))   
			}   
    
			function LineTo(x,y){   
				Line(xo,yo,x,y)   
			}   
    
			function sign(n){   
				if(n > 0)   
					return 1   
				if(n < 0)   
					return -1   
				return n   
			}   
    
			function Line(x1,y1,x2,y2){   
				x2 = Math.round(x2)   
				y2 = Math.round(y2)   
				xo = x2   
				yo = y2   
				y1 = orgY(y1)   
				y2 = orgY(y2)   
				var str = ""   
				var i = 0   
			
				var x = x1   
				var y = y1   
				dx = Math.abs(x2-x1)   
				dy = Math.abs(y2-y1)   
				s1 = sign(x2-x1)   
				s2 = sign(y2-y1)   
			
				if(dx == 0 || dy == 0){   
					ShowLine(x1,y1,x2-x1,y2-y1)   
					return   
				}   
			
				if(dx > dy){   
					temp = dx   
					dx = dy   
					dy = temp   
					key = 1   
				}else{
					key = 0
				}   
				e = 2*dy-dx   
			
				for(i=0;i<dx;i++){   
					px = 0   
					py = 0   
					Plot(x,y)   
					while(e>=0){   
						if(key == 1){   
							x += s1   
							px += s1   
						}else{   
							y += s2   
							py += s2   
						}   
						e = e-2*dx   
					}   
					if(key == 1)   
						y += s2   
					else   
						x += s1   
					e = e+2*dy   
				}   
			}     
       
			function MoveTo(x,y) {   
				Ox = Oy = -1   
				xo = Math.round(x)   
				yo = Math.round(y)   
			}   
       
			//   圆   
			function Cir(x,y,r){   
				MoveTo(x+r,y)   
				for(i=0;i<=360;i+=5){   
					LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)   
				}   
			}   
     
			//   弧形   
			function Arc(x,y,r,a1,a2){   
				MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)   
				for(i=a1;i<=a2;i++){   
					LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)   
				}   
			}   
     
			//   扇形   
			function Pei(x,y,r,a1,a2){   
				MoveTo(x,y)   
				for(var i=a1;i<=a2;i++){   
					LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)   
				}   
				LineTo(x,y)   
			}   
     
			//   弹出扇形   
			function PopPei(x,y,r,a1,a2){   
				dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10   
				dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10   
				x += dx   
				y += dy   
				MoveTo(x,y)   
				for(var i=a1;i<=a2;i++){   
					LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)   
				}   
				LineTo(x,y)   
			}   
       
			//   矩形   
			function Rect(x,y,w,h){   
				MoveTo(x,y)   
				LineTo(x+w,y)   
				LineTo(x+w,y+h)   
				LineTo(x,y+h)   
				LineTo(x,y)   
			}   
       
			//   准星   
			function zhunxing(x,y){   
				var ox = xo   
				var oy = yo   
				var oColor = color   
				color = "#000000"   
				Line(x-5,y,x+6,y)   
				Line(x,y-6,x,y+5)   
				print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')   
				color = oColor   
				xo = ox   
				yo = oy   
			} 
    
			//   标注   
			function biaozhuStr(x,y,s){   
				return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'   
			}   
     
			function biaozhu(x,y,s,t){   
				var ox = xo   
				var oy = yo   
				var oColor = color   
				point = "p01.gif"   
				if(t==1){   
					print(biaozhuStr(x-5,y+6,"·"+s))   
				}   
				if(t==2){   
					print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))   
				}   
				color = oColor   
				xo = ox   
				yo = oy   
			}   
    	</script>
 	</head>

 	<body>
	  	<table border="0" width="100%">
		   	<tr>
		    	<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1"> 
		    		JavaScript绘图
		    	</td>
			</tr>
		   <tr>
		    	<td width="100%" style="font-family: 幼圆; font-size: 12pt; color: #008000" class="t2">
		    		如果需要在网页上提供图形化的资料,通常是将其制作成图片,但这样一来网络上的开销就太大了。有什么办法呢?这里向你提供一组JavaScript函数,来解决这一问题。虽然简单了点,但是对画点线图来说还是绰绰有余的!
		    	</td>
		   	</tr>
	  	</table>
		<script>   
	    	if(IE4){   
		     	//基本图形   
				color = "maroon"   
				Cir(50,40,20)   
				Arc(100,40,20,60,120)   
				Pei(150,60,40,240,300)   
				Rect(200,20,40,40)   
		  
		     	//   折线图   
				color = "#FF0000"   
				var jd = new Array(203,232,277,223,271,234,273,284,276,250,267,28)   
				var rq = new Array('我','好','相','你','啊','!','你','知','道','吗','?','love')   
				MoveTo(30,jd[0]-40)   
				biaozhu(xo,yo,jd[0])   
				for(i=1;i<jd.length;i++){   
		      		LineTo(i*30+30,jd[i]-40)   
		      		biaozhu(xo,yo,rq[i],1)   
		     	}   
		     	color = "#C0C0C0"   
		     	Line(30,140,i*30+30,140)   
		     	Line(30,140,30,260)   
		  
		     	//   饼图   
		     	color = "#00FF00"   
		     	var gc = new Array(150,120,200,180,180)   
		     	var s = 0   
		     	var m = 0   
		     	var n = 0   
		     	for(i = 0;i < gc.length;i++){   
		      		s += gc[i]   
		      		if(gc[i] > m){   
		       			m = gc[i]   
		       			n = i   
		      		}   
		     	}   
		     	var k = s/360   
		     	var mm = 0   
		     	var a =0   
		     	for(i = 0;i < gc.length;i++){   
		      		b = Math.round((gc[i] + mm)/k)   
		      		if(i == n)   
		       			PopPei(600,150,100,a,b)   
		      		else   
		       			Pei(600,150,100,a,b)   
		      		biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)   
		      		mm = mm+gc[i]   
		      		a = b   
		     	}   
		    
		     	//   十字标注   
		     	MoveTo(280,20)   
		     	zhunxing(xo,yo)   
			}else{   
	     		document.write("<p>   </p><table   bgcolor=#FF0000><tr><td><font   color=#FFFF00>对不起!您的浏览器不能支持该页的某些功能,请换用IE4.0以上版本的浏览器!谢谢!</font></td></tr></table>")   
	    	}   
	 	</script>
	</body>
</html>

 

分享到:
评论

相关推荐

    网页web报表,javascript报表,简单好看

    "网页Web报表,JavaScript报表,简单好看"这个主题聚焦于使用JavaScript技术来创建交互式和美观的报表。JavaScript,作为一种广泛使用的客户端脚本语言,为网页提供了动态交互的能力,而报表则通常用于数据的展示和...

    javaScript报表使用VML技术

    JavaScript报表是一种动态生成数据展示的方式,它利用了浏览器的JavaScript引擎来实现交互式的图表和表格。在特定的历史时期,尤其是在Internet Explorer(IE)浏览器占据主导地位时,由于其对现代Web标准如SVG...

    javascript报表实例

    JavaScript报表是一种基于Web的动态数据可视化工具,常用于呈现复杂的数据集,使用户能够更直观地理解和分析数据。本实例提供了全面的JavaScript实现报表功能,包括饼图、条形图、波浪图、立体图等多种图表类型,...

    超酷javascript报表工具

    轻量级javascript报表工具: D3 NVD3 HightChart HightStock GO JS 地理报表(Google Map)

    JavaScript 报表展示实现代码

    虽然原始代码没有涉及,但现代的JavaScript报表通常会包含交互性,如鼠标悬停时显示数据详情,点击事件处理,以及实时数据更新等。这些功能可以通过绑定事件监听器和更新图表方法来实现。 综上所述,要实现...

    jquery生成报表,很多种类型的报表

    通过理解jQuery的基本操作,结合强大的JavaScript报表库,以及适当的图像和导出功能,你可以创建出既美观又实用的动态报表。在实际项目中,根据描述中的提示,你只需根据具体需求调整示例代码,即可快速生成符合业务...

    简单的报表样式,类似库房报表

    简单的报表样式,类似库房报表,大家可以参考,确实样式不错。

    js图表 js报表收集

    JavaScript报表库通常包含数据处理、表格布局和样式设置等功能。 1. Tabulator:一个强大的JavaScript表格库,支持数据的导入导出、排序、过滤和分页,还可以与各种数据源集成,如JSON、CSV等。Tabulator的API允许...

    js实现是演示报表特效

    不过,我们可以根据常见的JavaScript报表特效来推测可能涉及的知识点。 在JavaScript中,实现报表特效通常会涉及到以下几个方面: 1. **DOM操作**:JavaScript通过Document Object Model (DOM)与网页内容进行交互...

    javaScript导出EXCAL报表

    javaScript导出EXCAL报表javaScript导出EXCAL报表

    javascript实现打印报表功能

    本文将深入探讨如何使用JavaScript实现打印报表功能,包括与Excel和Word的交互,帮助开发者从初级到高级逐步提升技能。 首先,我们要理解JavaScript在报表打印中的角色。在网页端,JavaScript可以用于控制页面元素...

    Stimulsoft-report2017.1.11(js版完全去水印)

    总结来说,"Stimulsoft-report2017.1.11(js版完全去水印)"是一个强大的JavaScript报表组件,适用于Web应用的开发。它提供了丰富的设计选项、多种数据适配器和强大的交互功能,有助于开发者创建专业级别的报表,而...

    js 报表 Highcharts

    **JavaScript报表库Highcharts** Highcharts是一款基于JavaScript的图表库,专为网页和移动设备设计,用于创建高质量、交互式的图表。它支持多种图表类型,包括折线图、柱状图、饼图、散点图、面积图等,能够帮助...

    JavaScript 三维报表 饼图

    JavaScript 三维饼图是一种在网页上展示数据的可视化方式,它通过立体的图形来表示不同类别数据的比例关系。这种图表通常由多个扇形区域组成,每个扇形代表一个类别,其大小对应于该类别的数据量占总数据量的比例。...

    JavaScript三维报表,统计图--饼图样式

    JavaScript三维报表和统计图是网页数据可视化的重要工具,尤其在现代数据分析和决策支持系统中扮演着关键角色。本文将深入探讨如何使用JavaScript实现三维报表和饼图样式,并着重讲解其核心概念和技术。 首先,让...

    birt 报表javascript打印 安迅报表javascript打印问题

    birt脚本调试代码,只需要将代码放进文档中说明的位置,所有javascript调试打印结果都可以看到,提供了两种方式javascript的调试打印,网上也有很多例子说需要放到tomcat里才能打印,其实在报表开发工具中也可以打印...

    Stimulsoft Reports.JS试用版:一款功能强大的JavaScript和HTML5报表控件

    .JS是Stimulsoft公司最新发布的一款完全基于JavaScript和HTML5的报表控件,可以用于开发任何JavaScript报表应用程序,该产品并不需要安装任何.NET或Java框架就可以进行报表的设计、编辑、浏览。通过该控件开发人员...

    利用javascript和jxl实现自定义报表的输出

    JavaScript作为客户端的主要编程语言,可以提供丰富的交互性,而JXL则是一个用于处理Excel文件的Java库,两者结合能够帮助我们创建动态的、用户定制的报表。 首先,我们需要了解JavaScript的基础知识。JavaScript是...

Global site tag (gtag.js) - Google Analytics