`
- 浏览:
81220 次
- 性别:
- 来自:
上海
-
<html>
<head>
<title>JavaScript绘图</title>
<scriptlanguage="JavaScript">...
IE4=!(navigator.appVersion.charAt(0)<"4"||navigator.appName=="Netscape")
varxo=0
varyo=0
varOx=-1
varOy=-1
varrad=Math.PI/180
varmaxY=400
varcolor="red"
functionprint(str)...{
document.write(str)
}
functionorgY(y)...{
returnmaxY-y
}
functionoutPlot(x,y,w,h)...{
print('<spanstyle="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
}
functionPlot(x,y)...{
outPlot(x,y,1,1)
if(Ox>=0||Oy>=0)...{
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox=x
Oy=y
}
functionShowLine(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))
}
functionLineTo(x,y)...{
Line(xo,yo,x,y)
}
functionsign(n)...{
if(n>0)
return1
if(n<0)
return-1
returnn
}
functionLine(x1,y1,x2,y2)...{
x2=Math.round(x2)
y2=Math.round(y2)
xo=x2
yo=y2
y1=orgY(y1)
y2=orgY(y2)
varstr=""
vari=0
varx=x1
vary=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
}
}
functionMoveTo(x,y)...{
Ox=Oy=-1
xo=Math.round(x)
yo=Math.round(y)
}
//圆
functionCir(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)
}
}
//弧形
functionArc(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)
}
}
//扇形
functionPei(x,y,r,a1,a2)...{
MoveTo(x,y)
for(vari=a1;i<=a2;i++)...{
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
//弹出扇形
functionPopPei(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(vari=a1;i<=a2;i++)...{
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
//矩形
functionRect(x,y,w,h)...{
MoveTo(x,y)
LineTo(x+w,y)
LineTo(x+w,y+h)
LineTo(x,y+h)
LineTo(x,y)
}
//准星
functionzhunxing(x,y)...{
varox=xo
varoy=yo
varoColor=color
color="#000000"
Line(x-5,y,x+6,y)
Line(x,y-6,x,y+5)
print('<spanstyle="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
color=oColor
xo=ox
yo=oy
}
//标注
functionbiaozhuStr(x,y,s)...{
return'<spanstyle="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
functionbiaozhu(x,y,s,t)...{
varox=xo
varoy=yo
varoColor=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>
<tableborder="0"width="100%">
<tr>
<tdwidth="100%"style="font-family:方正舒体;font-size:18pt;color:#FF0000"class="t1">JavaScript绘图</td>
</tr>
<tr>
<tdwidth="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"
varjd=newArray(
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"
vargc=newArray(
150,120,200,180,180
)
vars=0
varm=0
varn=0
for(i=0;i<gc.length;i++)...{
s+=gc[i]
if(gc[i]>m)...{
m=gc[i]
n=i
}
}
vark=s/360
varmm=0
vara=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><tablebgcolor=#FF0000><tr><td><fontcolor=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>")
}
</script>
</body>
</html>
分享到：
相关推荐
JavaScript绘图技术是一种在网页上创建图形和可视化数据的强大工具，尤其在现代Web开发中扮演着重要角色。本文将深入探讨JavaScript绘图的基础知识、常用库以及如何利用它们实现各种绘图功能。 首先，了解...
用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图的类库 超级好用的用作js绘图...
js 特效 html 特效 JavaScript绘图
JavaScript绘图技术是Web开发中的一个重要领域，它允许开发者在网页上动态创建和修改图形，为用户带来丰富的视觉体验。JavaScript绘图的核心是利用HTML5的Canvas元素和相关的API，这些API提供了绘制线条、形状、图像...
JavaScript绘图函数大全，非常实用
纯JavaScript绘图不仅可以脱离框架和库，还能更好地理解和控制图形的每一个细节，提高性能，并且具有高度的灵活性和可定制性。在实际项目中，还可以考虑使用诸如Fabric.js、Paper.js、Three.js等库来进一步提升开发...
本篇文章将深入探讨JavaScript绘图的实现方案及其示例，帮助你揭开在网页上绘画的神秘面纱。 首先，JavaScript绘图的基础是HTML5的Canvas API。Canvas是一个基于矢量图形的画布，通过JavaScript可以动态地绘制和...
以上就是关于JavaScript绘图的一些基础知识，包括Canvas API的使用、图形美化技巧，以及可能的绘图库`JSCharts3`和`flot`的简单介绍。通过学习和实践，你可以用JavaScript轻松创造出各种富有吸引力的图形和图表，为...
这篇博文“JavaScript绘图，在页面上绘制圆状图形”提供了一个源码示例，我们可以从中学习到如何利用JavaScript和HTML5 Canvas API来创建动态的、交互式的圆形。 首先，我们需要在HTML文件中引入一个canvas元素。在...
JavaScript绘图技术是一种在网页上实现动态可视化的重要手段，它允许开发者通过编程方式创建各种复杂的图形，包括统计图。在Web开发中，JavaScript绘图库如D3.js、Chart.js、ECharts等提供了丰富的功能，使得即使...
在提供的"用JavaScript绘图 ——JS2D函数集.htm"文件中，应该包含了关于这些函数的详细解释和示例代码，读者可以通过阅读和实践进一步理解并掌握这些绘图技巧。无论是初学者还是有经验的开发者，了解和熟练运用JS2D...
JavaScript绘图函数库是开发网页动态图形的一种强大工具，它为开发者提供了丰富的API，使得在浏览器环境中绘制复杂的图形变得简单易行。在这个标题为“javascript绘图函数库”的资源中，我们主要关注的是如何利用...
JavaScript（简称Js）作为一种广泛应用于Web开发的脚本语言，其在数据可视化领域的应用日益凸显。TeeChart是一款强大的图表绘制库，提供了多种编程语言的支持，包括Java。在本文中，我们将深入探讨...
JavaScript绘图和画画App是一种基于Web的交互式应用程序，它允许用户通过浏览器进行绘画和创意表达。这样的应用通常使用HTML5的Canvas元素结合JavaScript技术来实现。Canvas是HTML5的一个重要组成部分，它提供了一个...
**JS绘图组件详解** 在Web开发中，数据可视化是一个重要的方面，特别是在数据分析、报告展示以及用户交互场景中。JS绘图组件就是用于在网页上创建动态、交互式图表的工具，它们通常提供了丰富的功能，使得开发者...
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javascript 写的前端程序,也包括多个和后端程序(java/C#等等)集成...
**JS绘图插件详解** 在现代Web开发中，数据可视化是不可或缺的一部分，它能帮助用户更好地理解复杂的数据。"JS绘图插件"正是这样一款工具，它提供了丰富的功能，使得开发者能够轻松地在网页上创建出各种图表，如...
这个“Js 绘图 Flot 示例”是为初学者和开发者提供的学习资源，帮助他们掌握如何使用 Flot 来实现动态数据可视化。 1. **Flot 基本概念** - **Canvas**: Flot 利用 `<canvas>` 标签作为图形的画布，这是一个HTML5...
在Android上使用JavaScript绘图可能会带来性能问题，特别是在大量数据或复杂图表时。因此，合理使用缓存、优化数据处理、减少不必要的重绘等都是提升性能的关键。 7. **自定义样式和交互** ECharts提供了丰富的...