一组JavaScript绘图函数
2008-05-01 06:21
399 查看
<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,280
)
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,jd[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>
<
<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,280
)
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,jd[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:发现一组非常好的js函数、原型和对象的题目
- javascript替换一组关键字的函数
- JavaScript 演练(1). 定义一组常量或一组函数
- 一组好用的javascript日期处理函数
- javascript 函数的定义与参数的有无
- Javascript trim()函数实现
- Javascript - 定义函数直接调用
- JavaScript与vml绘图性能比较——苗林专栏
- 理顺 JavaScript (20) - String 中的正则表达式函数
- 《GNU_Octave_Beginner_s_Guide》读书笔记3：函数与绘图
- JavaScript 函数参数设置默认值
- JavaScript 全选函数的实现
- 在JavaScript里防止事件函数高频触发和高频调用的方法
- JavaScript之函数
- JavaScript-4.2函数,变量作用域---ShinePans
- javascript使用定时函数实现跳转到某个页面
- javascript文字编码函数
- javascript中函数的闭包自调用
- JavaScript 学习之原型与函数