您好,欢迎来到模板无忧!
登录
注册
鏀惰棌
鎼滅储
鍦板浘
甯姪
模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
关闭顶部
展开顶部
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
AI灏忚仛 鑳藉啓浼氱敾
鍩熷悕
鎺ㄨ崘
展开边栏
关闭边栏
网页特效代码
模板无忧
>
网页特效
>
综合其它特效代码
>
收藏
分享
查看评论
综合其它
演示
用层画图_综合其它特效
查看演示效果
特效Tag:
画图
添加
缁囨ⅵDedeCMS瑙嗛鏁欑▼
涔扮┖闂� 绉熸湇鍔″櫒 閫夌綉纭曚簰鑱旓紒
鏃犲咖绔欓暱宸ュ叿,鐧惧害鏉冮噸涓€閿叏鏌�!
用层画图,您可以先修改部分代码再运行.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>emu's dhtml chart-模板无忧www.mb5u.com</TITLE> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="emu"> <META NAME="Keywords" CONTENT="chart javascript"> <META NAME="Description" CONTENT="emu's dhtml chart"> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawLine(x0,y0,x1,y1,color){ var rs = ""; if (y0 == y1) //画横线 { if (x0>x1){var t=x0;x0=x1;x1=t} rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>"; } else if (x0 == x1) //画竖线 { if (y0>y1){var t=y0;y0=y1;y1=t} rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>"; } else { var lx = x1-x0 var ly = y1-y0 var l = Math.sqrt(lx*lx+ly*ly) rs = new Array(); for (var i=0;i<l;i+=1) { var p = i/l; var px = parseInt(x0 + lx*p); var py = parseInt(y0 + ly*p); rs[rs.length] = "<p class=emuWH style='top:"+py+";left:"+px+";background-color:"+color+"'/>"; } rs = rs.join(""); } return rs } function drawRectangle(x0,y0,x1,y1,color,title) { if (x0 == x1 || y0 == y1) return; if (x0>x1) {var t=x0;x0=x1;x1=t} if (y0>y1) {var t=y0;y0=y1;y1=t} return "<table style='top:"+y0+";left:"+x0+";position:absolute' title="+title+"><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"> </td></table>"; } function outText(x0,y0,text,fontSize,color){ return "<p style='top:"+y0+";left:"+x0+";position:absolute;color:"+color+";font-size:"+fontSize+"'>"+text+"</p>"; } var points = new Array(1000); function drawPie(x0,y0,radius,startAngle,endAngle,color){ if (points.length<radius<<2) points.length=radius<<2; var startAngle = startAngle*Math.PI/180; var endAngle = endAngle*Math.PI/180; var maxX=0,maxY=0,minX=0,minY=0; var pointsLength = 0; var lines ; // get arc points var step = 1/radius; for (var i=startAngle;i<endAngle;i+=step){ var x = Math.round(Math.sin(i)*radius); var y = Math.round(Math.cos(i)*radius) points[pointsLength++]=[x,y]; if (maxX<x) maxX=x; if (minX>x) minX=x; if (maxY<y) maxY=y; if (minY>y) minY=y; } // get radius points var dx1=Math.sin(startAngle)*radius; var dy1=Math.cos(startAngle)*radius; var dx2=Math.sin(endAngle)*radius; var dy2=Math.cos(endAngle)*radius; var L = Math.sqrt(dx1*dx1+dy1*dy1); var stepx1 = dx1/L , stepy1 = dy1/L ,stepx2 = dx2/L , stepy2 = dy2/L ; for (var i=0;i<L;i+=.99){ points[pointsLength++] = [Math.round(stepx1*i),Math.round(stepy1*i)] points[pointsLength++] = [Math.round(stepx2*i),Math.round(stepy2*i)] } var dx = maxX-minX+1; var dy = maxY-minY+1; if (dx>dy){ lines = new Array(dy); for (var i=pointsLength-1;i>-1;i--){ var p0 = points[i]; var px = p0[0]; var y = p0[1]-minY; if (lines[y]){ if (lines[y][0]>px) //left point lines[y][0] = px; if (lines[y][1]<px) //right point lines[y][1] = px; }else{ lines[y]=[px,px]; } } for (var i=dy-1;i>-1;i--){ var left = lines[i][0]; lines[i] = "<p class=emuH style='top:"+(i+minY+y0)+";left:"+(left+x0)+";width:"+(lines[i][1]-left)+";background-color:"+color+"'/>"; } }else{ lines = new Array(dx); for (var i=pointsLength-1;i>-1;i--){ var p0 = points[i]; var py = p0[1]; var x = p0[0]-minX; if (lines[x]){ if (lines[x][0]>py) //top point lines[x][0] = py; if (lines[x][1]<py) //buttom point lines[x][1] = py; }else{ lines[x]=[py,py]; } } for (var i=dx-1;i>-1;i--){ var top = lines[i][0]; lines[i] = "<p class=emuW style='left:"+(i+minX+x0)+";top:"+(top+y0)+";height:"+(lines[i][1]-top)+";background-color:"+color+"'/>"; } } return lines.join(""); } function drawArc(x0,y0,radius,startAngle,endAngle,color,step){ if (step == null || isNaN(step)) step=1; rs = new Array(); tmpar = new Array(); startAngle = startAngle/180*Math.PI; endAngle = endAngle/180*Math.PI; for (var i=startAngle;i<endAngle;i+=(step/radius)) { var dx = parseInt(Math.sin(i)*radius+x0); var dy = parseInt(Math.cos(i)*radius+y0); rs[rs.length] = "<p class=emuWH style='top:"+dy+";left:"+dx+";background-color:"+color+"'/>"; } return (rs.join("")); } function fixTo(s,i){ if (s==null || s=="" || isNaN(s) || Math.round(s)==0) return 0; i = Math.round(i); if (i==0) return Math.round(s); if (i==null || isNaN(i) || i<0) i=2; var v = Math.round(s*Math.pow(10,i)).toString(); if (/e/i.test(v)) return s; return v.substr(0,v.length-i)+"."+v.substr(v.length-i); } //--> </SCRIPT> <style> .emuW{position:absolute;font-size:1px;width:1} .emuH{position:absolute;font-size:1px;height:1} .emuWH{position:absolute;font-size:1px;width:1;height:1} A{text-decoration:none;color:#FF66FF} </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawCol(e){ var div1 = document.getElementById("canvas") var rows = e.parentNode.parentNode.rows; var cellIndex = e.cellIndex; var data = []; for (var i=1;i<rows.length;i++){ var d = parseInt(rows[i].cells[cellIndex].innerHTML);; if (isNaN(d)){ alert("Invalid data!"); return; } var color = rows[i].bgColor; var title = rows[i].cells[0].innerHTML; data[i-1] = [d,color,title] } var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"销售情况对比",15,"blue"); div1.innerHTML = chartTitle+drawPoleWidthData(data).join("")+drawPieWidthData(data).join(""); } function drawPieWidthData(data){ var sum=0; var rs = new Array(); for (var i=0;i<data.length;i++) sum += data[i][0]; var startAngle = 0; for (var i=0;i<data.length;i++){ var angle = data[i][0]/sum*360; rs[i] = drawPie(580,250,100,startAngle,startAngle+=angle,data[i][1]) } return rs; } function drawPoleWidthData(data){ var rs = new Array(); var max = 0; for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0]; for (var i=0;i<data.length;i++){ rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue"); var top = 400-200*data[i][0]/max; rs[rs.length] = drawRectangle(i*100+130,top,i*100+170,400,data[i][1],"¥"+fixTo(data[i][0])) } rs[rs.length]= drawLine(100,400,500,400,"black") rs[rs.length]= drawLine(100,400,100,150,"black") rs[rs.length]= drawLine(500,400,490,405,"black") rs[rs.length]= drawLine(100,150,95,160,"black") rs[rs.length]= drawLine(500,400,490,395,"black") rs[rs.length]= drawLine(100,150,105,160,"black") return rs; } function drawRow(e){ var div1 = document.getElementById("canvas") var row = e.parentNode; var cells = row.cells; var rowIndex = row.rowIndex; var data = []; for (var i=1;i<cells.length;i++){ var d = parseInt(cells[i].innerHTML);; if (isNaN(d)){ alert("Invalid data!"); return; } var color = row.bgColor; var title = row.parentNode.rows[0].cells[i].innerHTML; data[i-1] = [d,color,title] } var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"销售情况走向",15,"blue"); div1.innerHTML = chartTitle+drawLineWidthData(data).join(""); } function drawLineWidthData(data){ var rs = new Array(); rs[rs.length]= drawLine(100,400,500,400,"black") rs[rs.length]= drawLine(100,400,100,150,"black") rs[rs.length]= drawLine(500,400,490,405,"black") rs[rs.length]= drawLine(100,150,95,160,"black") rs[rs.length]= drawLine(500,400,490,395,"black") rs[rs.length]= drawLine(100,150,105,160,"black") var max = 0; for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0]; var top; for (var i=0;i<data.length;i++){ rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue"); if (i>0){ rs[rs.length] = drawLine(i*100+50,top,i*100+150,(400-200*data[i][0]/max),data[i][1]) } top = 400-200*data[i][0]/max; } return rs; } //--> </SCRIPT> </HEAD> <BODY> <TABLE bgcolor=black cellspacing=1> <TR bgcolor=#FFFFCC> <TD>销售额</TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">1月</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">2月</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">3月</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">4月</A></TD> </TR> <TR bgcolor=#CCFFCC> <TD onclick="drawRow(this)"><A HREF="javascript:;">整机</A></TD> <TD>112535</TD> <TD>152430</TD> <TD>214235</TD> <TD>182240</TD> </TR> <TR bgcolor=#CCCCFF> <TD onclick="drawRow(this)"><A HREF="javascript:;">显示器</A></TD> <TD>76230</TD> <TD>70549</TD> <TD>68452</TD> <TD>83653</TD> </TR> <TR bgcolor=#FFCCCC> <TD onclick="drawRow(this)"><A HREF="javascript:;">主板</A></TD> <TD>54358</TD> <TD>45632</TD> <TD>44235</TD> <TD>55843</TD> </TR> </TABLE> <div id=canvas></div> </BODY> </HTML>
所属频道:
综合其它特效
/
更新时间:2012-12-30
[收藏]
[报错]
[返回列表]
相关
综合其它特效
:
MD5加密
页面保护 可以禁止某些IP的访问
冻结你的窗口,使窗口无法再响应
鼠标放上就激活链接
密码强弱度检测万能插件
叫你计算机"爬"着工作
仿VB密码
打开网页后即在后台打开无数记事本
输入正确进入密码保护页
一点按钮就会跳出无限窗口,直到耗尽您的资源
输入密码后才能进入页面
弹出无限IE
综合其它特效Rss订阅
特效代码搜索
综合其它特效推荐
一个仿DOS的Loading效果
UrlEncode
可定时自动关闭的弹出层广告窗口代码
CSS网站变灰代码
JavaScript使用encodeURI()和decodeURI()获取字符串值
HTML旗帜
JS封装一个透明度渐变、尺寸变化、位置移动函数
Js仿开心网好友印象功能(点击文字弹出印象框)
JS优化For循环的实例代码
JavaScript 拖放效果
猜你也喜欢看这些
jquery scrollmenu 有点酷的黑色滚动菜单
jquery图片墙特效多张小图片集合图片墙排列布局
jQuery Tab 多功能选项卡
162-MagicZoom产品放大查看效果代码
jQuery 控制图片制作动画导航菜单
jQuery 使用sprite图实现动态渐变按钮
jquery 提交表单制作一个简单的radio单选按钮选项卡
jquery图片放大镜插件制作多种图片放大查看效果
很漂亮的支持隔行换色的标签切换TAb
milonic dhtml js menu
相关链接:
复制本页链接
|
搜索用层画图
特效说明:
综合其它模板
-
用层画图
。
鏀惰棌&鍒嗕韩
QQ绌洪棿
鏂版氮寰崥
鑵捐寰崥
浜轰汉缃�
寮€蹇冪綉
鐧惧害鎼滆棌
澶嶅埗缃戝潃
鏇村...