- 浏览: 384326 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
消失-IT超市:
方便加一下你的QQ吗,我的QQ是252375879,有个问题请 ...
js调用ocx控件(读写IC卡) -
mszb00123:
很有用
Extjs之--图片上传器 -
shouhouhuakai:
好崇拜,不错
URLConnection的连接、超时、关闭用法总结 -
wujierd:
写得好详细,学习了
URLConnection的连接、超时、关闭用法总结 -
paruke:
请问这个能加上图片旋转功能么 我试了一下 发现寻找中心点是个问 ...
Extjs之--图片浏览器
1、基本概念
VML的全称是Vector Markup Language(矢量可标记语言),VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。具体内容可以上网搜索。
网址1:http://www.w3.org/TR/1998/NOTE-VML-19980513
2、利用VML实现树形结构图
通过后台数据库查询,查询销售流向。
3、自己动手绘制流程图
效果如图:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Insert title here</title> <style type="text/css"> v\:*{ behavior:url(#default#VML); } v\:RoundRect{ text-align:center; position:relative; } v\:TextBox{ vertical-align:middle; font-size:13px; } </style> </head> <body> <div class="grid" align="center"> <table class="gridbody" cellpadding="1" cellspacing="0" rules="all"> <tr class="gridtitle"> <td align="left" colspan="7">供货商所有关联销售信息查询</td> </tr> <tr class="griditem"> <td> <center> <script> //第一层树结构 var incv = new Array(); incv[0] = "1"; incv[1] = "IOS111052500018"; incv[2] = "临沂新程金锣肉制品集团有限公司"; //第二层树结构 var dcv=new Array(); //定义一维数组 dcv[0]=new Array(); //将每一个子元素又定义为数组 dcv[0][0]='2'; dcv[0][1]='5000100003'; dcv[0][2]='华联超市经七超市金锣专柜'; dcv[1]=new Array(); //将每一个子元素又定义为数组 dcv[1][0]='3'; dcv[1][1]='5000100002'; dcv[1][2]='华联超市世购超市金锣专柜'; dcv[2]=new Array(); //将每一个子元素又定义为数组 dcv[2][0]='4'; dcv[2][1]='5000100001'; dcv[2][2]='华联超市嘉华超市金锣专柜'; document.write(drawXX(incv,dcv)); function drawXX(iobj,dobj){ v1 = 20+40*(dobj.length-1); v2 = v1/2; v3 = v2 - 12; //alert("start -- "); var start = "<v:group coordsize='600,800' style='width:600px;height:800px;'>"; var is="<v:RoundRect style='width:300px;height:28px;left:0px;top:" + v3 + "px' align='center'>" + "<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/><v:TextBox >" + iobj[1] + "(" + iobj[2] + ")" + "</a></v:TextBox></v:RoundRect>"; var ls=""; ls +="<v:line from='300," + v2 + "' to='340," + v2 + "' />" ls +="<v:line from='340,20' to='340," + v1 + "' />" var ds =""; for(var i=0;i<dobj.length;i++){ ds +="<v:line from='340," + (20+i*40) + "' to='380," + (20+i*40) + "' />" ds +="<v:RoundRect style='width:280px;height:28px;left:380px;top:" + (8+i*40) + "px;' align='center'>" ds +="<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/>"; ds +="<v:TextBox >" + dobj[i][1] +"("+ dobj[i][2] +")" + "</v:TextBox>"; ds +="</v:RoundRect>"; } var end = "</v:group>"; var draws = start + is + ls + ds + end; return draws; } </script> </center> </td> </tr> </table> </div> </body> </html>
4、利用ECOTree提供的js 实现更为复杂的树形结构图
附件 graphic_javascript_tree_src.zip
效果如图:
<%@ page language="java"%> <%@ page contentType="text/html;charset=GBK"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%> <%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title></title> <script type="text/javascript" src="../js/ECOTree.js"></script> <link rel="stylesheet" href="<c:url value='/css/ECOTree.css' />" /> <link rel="stylesheet" href="<c:url value='/css/style.css' />" /> <style type="text/css"> v\:*{ behavior:url(#default#VML); } v\:RoundRect{ text-align:center; position:relative; } v\:TextBox{ vertical-align:middle; font-size:13px; } </style> <script> var t = null; function CreateTree() { t = new ECOTree('t','recallTreeDiv'); t.config.iRootOrientation = ECOTree.RO_LEFT; t.config.defaultNodeWidth = 246; t.config.defaultNodeHeight = 36; t.config.iSubtreeSeparation = 20; t.config.iSiblingSeparation = 10; t.config.linkType = 'B'; t.config.useTarget = false; t.config.nodeFill = ECOTree.NF_GRADIENT; t.config.colorStyle = ECOTree.CS_LEVEL; //t.config.levelColors = ["#966E00","#BC9400","#D9B100","#FFD700"]; //t.config.levelBorderColors = ["#FFD700","#D9B100","#BC9400","#966E00"]; t.config.nodeColor = "#FFD700"; t.config.nodeBorderColor = "#FFD700"; t.config.linkColor = "#5555FF"; <% java.util.List list = (java.util.List)request.getAttribute("recallList"); for(int i=0;i<list.size();i++) { Object obj = list.get(i); org.mcp.data.logic.BackwardNode2 backwardNode = (org.mcp.data.logic.BackwardNode2)obj; %> t.add('<%=backwardNode.getBatch()%>','<%=backwardNode.getPbatch()%>','<%=backwardNode.getBatch()%><br/><%=backwardNode.getEnterName()%>'); <% } %> t.UpdateTree(); } </script> </head> <body onload="CreateTree();"> <h4>供货商所有关联销售流向信息示意图 <input type="button" value="返 回" onclick="javascript:window.history.go(-1)"></h4> <div id="recallTreeDiv"></div> </body> </html>
发表评论
-
不负时光,继续学习
2017-04-11 17:04 6054月,一年当中最好的时节,和风煦日春意浓; ... -
生活依旧,做好自己
2017-02-04 16:51 385新年开工第二天,工作之余翻看了电脑上以前的文 ... -
2016年最后一天随笔
2016-12-30 14:48 5592016年马上就要过去了,回顾过去的一年感 ... -
excel中汉字转拼音全拼和简拼
2016-09-12 11:45 1510一、汉字转全拼 1.启动Excel 2003(其它版本请仿 ... -
年底总结3-工作中遇到的错误及解决方式
2015-02-16 11:28 982在过去的一年工作中遇到的一些问题及解决方式,如下: -- ... -
【转】Web开发中最致命的8个小错误
2015-02-16 09:40 706现在,有越来越多所谓的“教程”来帮助我们提高网站的易 ... -
【转】chrome调试工具常用功能整理
2014-11-13 23:35 461Elements chrome devtools 中 El ... -
数据库方面遇到的问题总结
2013-05-23 20:29 9531、mysql服务自动关闭处理方式 我的电脑 -> ... -
resin2.1.17报错:META-INF/c.tld:6 unknown element `xsi:schemaLocation' in `taglib'
2012-08-20 18:37 30381、问题描述 resin启动后,访问jsp页面 ... -
Extjs grid 合计
2012-05-31 14:28 18761、直接在客户端统计,动态的修改Grid 2、代码如下 ... -
mysql函数使用-字符串处理
2012-05-29 17:15 11371、按地区统计数据 select q.psn,t.na ... -
spring JdbcTemplate 批量插入
2012-05-27 09:13 19961、通过批量操作减少与数据库连接所消耗的资源。 2、J ... -
extjs2.x中带有拼音检索功能combo
2012-04-22 16:17 22861、extjs2.2版本 2、js代码示例 / ... -
JDBC连接Sql server
2012-03-07 10:24 16671、采用微软提供的ms sql server jdbc dri ... -
java下将汉字转换为拼音
2012-01-15 18:06 11661、代码如下,不过有些汉字不支持,如:茜 import ... -
年底总结2-spring多线程任务调度
2012-01-01 13:55 54141、spring framework开发参考手册中第23掌& ... -
年底总结1-tomcat6使用中遇到的问题
2012-01-01 10:23 65471、tomcat6.0.18注册windows服务成功后,但是 ... -
Extjs2.x中使用htmleditor遇到的问题记录
2011-10-16 10:37 16421、IE6下htmleditor文本编辑器无法显示 解决:删 ... -
java串口编程-读取称重仪表中净重
2011-10-12 17:08 5085一、需求说明 ... -
记录oracle 关联更新的例子
2011-10-03 20:55 11191、说明 修改某一天“本期值”数据时,需要把第二天的“上期值 ...
相关推荐
VML应用实例大全教程
vml+javascript直接在浏览器中绘制动态曲线图实例
vml-rose流程图,基于vml的web绘图代码
内容电商2.0研究报告-VML-胖鲸智库-201809.pdf
在现代汉语复句教学和研究中,为了分析复句的逻辑语义关系,经常需要绘制复句关系层次结构图。传统的做法是利用手工方式绘制,以图片的形式存储,但这种方式具有存储容量大、绘制工作量大的缺点。采用VML技术,在...
vml+javascript直接在web页面绘制动态曲线
FlashVml -- 最强VML开发工具、铸造Internet上的传奇历史,被誉为Internet上的一支画笔!!!强烈推荐!!!!!
vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程)
svg-to-vml-with-trifleJS $ bin\triflejs.exe convert.js example --emulate=IE8 或者$ npm install && grunt
VML绘画源代码,包括饼图,分组柱状图,线型图,柱图叠加曲线图,柱状分离图,柱状图等图形 有详细的例子,供大家共享
VML中文手册 - www_infowe_com.htm java
vml入门 vml教程 vml参考 vml实例 从网络上收集的各种vml实例.方便vml入门人员. 也有各种vml图形
vml在线画图用例,含Flashvml2及Flashvml3的用例。 什么是vml? VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是...
VML实例VML实例VML实例VML实例VML实例VML实例VML实例VML实例
在web页面通过vml画图,如显示cpu使用率,内存使用率等等,动态绘制曲线和图形
vml应用实例(图表) 徐家汇街道 30 天平街道 22 湖南街道 131 枫林街道 15 康健街道 11 凌云街道 13 龙华街道 32 漕河泾街道 44 斜土街道 15 田林街道 42 长桥街道 28 虹梅街道 41 华泾镇 14 社区学院...
自己做的一个简单例子 用了多个元素,风格各异,与大家共享
利用VML标记语言画图、动画制作利用VML标记语言画图、动画制作
EcoTree树型展示控件,因为是vml的,必须在IE兼容模式下运行。这个树非常适合做组织结构的展示,可以横向也可以竖向,大家可以参考学习下东西,可能项目中应用不太适合。
vml技术相关详细文档,介绍的vml的相关函数的应用和介绍