<%@ 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>
分享到:
相关推荐
多种javascript实现的报表,简单实用,适用于不同的情况。经过简单数据传入,就可实现专业的统计图表展示
javaScript报表使用VML技术,适用于IE内核的浏览器
轻量级javascript报表工具: D3 NVD3 HightChart HightStock GO JS 地理报表(Google Map)
完整的javascript实现报表功能,有饼型,条形,波浪型,立体,等
简单的报表样式,类似库房报表,大家可以参考,确实样式不错。
以下是从网上找到的一段JavaScript实现图形报表的代码,对于想客户端显示报表的朋友可以参考下。
javaScript导出EXCAL报表javaScript导出EXCAL报表
jQuery是一个快速的,简洁的JavaScript库,能让用户更方便地处理HTML documents、events,实现动画效果,方便地为网站提供AJAX交互,并且它兼容各种浏览器。因为FineReport报表解析后最终成为一个html页面,因此可以...
birt脚本调试代码,只需要将代码放进文档中说明的位置,所有javascript调试打印结果都可以看到,提供了两种方式javascript的调试打印,网上也有很多例子说需要放到tomcat里才能打印,其实在报表开发工具中也可以打印...
.JS是Stimulsoft公司最新发布的一款完全基于JavaScript和HTML5的报表控件,可以用于开发任何JavaScript报表应用程序,该产品并不需要安装任何.NET或Java框架就可以进行报表的设计、编辑、浏览。通过该控件开发人员...
javascript结合报表实现,从初级到高级提升的阶梯 实现了excel表格的打印,从excel导出到word功能
几款javascript js 生成 统计图 统计报表
JavaScript 三维饼图,立体效果,js直接显示
JavaScript在Cognos+10复杂报表开发中的应用
javascript操作excel生成报表示例_.docx
Cell 插件用于开发B/S结构程序,使用Asp, Asp.net, Jsp, VbScript, JavaScript等语言开发,可以在浏览器中直接打印报表(非IE打印),带有国际化数字签名,让用户使用更方便,更安全。 · 具备Cell组件的所有特色...
Web报表的XML+JavaScript解决方案.pdf
南京擎天科技有限公司研发的专业报表设计和开发平台。支持B/S C/S win32程序的开发,最重要的是免费的 引擎组件提供一个COM接口,任何...支持VB,VBA,VC,Delphi,ASP,JavaScript,VBScript等多种开发工具和语言。
javascript报表,非常经典。FusionCharts v3源码