html 组织结构 图表,HTML5实现的矢量卡片式组织结构图
组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。
首先来看下整体效果。
先来一个经典的上下层级布局:
再来一个圆形布局:
这些布局用twaver来实现是非常的合适,实现起来也是很容易,twaver内部就提供了多种布局方式:自左向右,从下向上,具体可以看twaver官方文档介绍,这里就不多说了。
今天我们着重说一下twaver如果实现上图中的网元。先放大看看效果:
这里借用了女神的范冰冰头像。我们假设范冰冰为财务部出纳,我想范爷做为财务部主管也是当之无愧的,从刚开始的北漂到后来的一夜狂赚8千万。现在的社会,只要有钱投资了房产后半辈子就不用愁了,闲话不多扯。这里我们采用的是名片式的方式来呈现组织图上的每个网元,左侧一张图片,右侧是职称,这种矢量和位图的结合效果也是非常赞的。那么这种网元如何来实现呢?首先我们需要定义一个圆角矩形:
twaver.Util.registerImage('employee', {
w: 200,
h: 135,
cache: false,
origin: {x:0, y:0},
v: [{
shape: 'rect',
w: '100%',
h: '100%',
r: 8,
lineColor:'black',
lineWidth:2.5,
fill: '#F5ECCE',
}],
});
在圆角矩形的右侧放上文字:
{
shape: 'text',
text: '',
font: '12px "Microsoft Yahei"',
translate: {x:150,y:135/2},
}
translate是将文字平移到指定的位置,这里我们需要放在右侧,因此需要设置偏右,x,y是相对于网元左上角原点来设置的。
接下来需要在左侧放置一个椭圆用于放组织节点的照片,这里的椭圆可以直接用path来描述 。
{
shape: 'path',
data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
lineColor:'#BBBBBB',
lineWidth:1,
translate: {x: 60, y:135/2}
}
data用于描述path的路径,这里面的M,Q,L分别代表moveto,quadraticCurveTo和lineto,比如M-45,就是移动到-45的位置上。具体的含义可以参考我们的官方文档。
接下来需要加上员工的图片,图片这里采用的是一般的位图,位图需要注册后才能使用。由于原始图片是方形的,需要裁减出圆角矩形的形状,说到裁减,twaver的矢量描述中支持clip,默认是不clip,设置clip之后,就会将超出矢量图片之外的区域的进行裁剪,可以用shape来描述裁减的区域,这里我们需要裁剪出圆角矩形,因此设置和上面矩形相同的path路径即可。
twaver.Util.registerImage('clip_pic', {
w: 128,
h: 128,
cache: false,
clip: {
shape: 'path',
data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
},
v: [{
shape: 'image',
x:-64,
y:-64,
name: '',
}],
});
关于clip的更多使用,可以参考下面的文档:
想要具体demo的小伙伴,请发邮件至tw-service#servasoft.com,我们会将完整代码发送给您。
html 组织结构 图表,HTML5实现的矢量卡片式组织结构图相关推荐
- HTML5实现的矢量卡片式组织结构图
组织结构图(Organization chart)是企业的流程运转.部门设置及职能规划等最基本的结构依据.和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用T ...
- html5折叠卡片,基于HTML5折叠卡片式下拉菜单代码
基于HTML5折叠卡片式下拉菜单代码.这是一款基于jQuery+CSS3+HTML5实现的下拉列表框特效代码.效果图如下: 实现的代码. hmtl代码: 爱编程 爱编程 jQuery特效 CSS3特效 ...
- HTML卡片式布局源码,html5自适应卡片式设计动态加载整站源码_
html5自适应卡片式设计动态加载整站源码 该模板是非常容易存活的,这样的程序很容易吸引访客点击,提升ip流量和pv是非常有利的,随意挂点联盟广告都能养活程序. 本套整站源码采使用现在非常流行的全屏自 ...
- OrgChart-简单实用的组织结构图表jQuery插件
插件介绍 OrgChart是一款简单实用的组织结构图表jQuery插件.OrgChart通过DOM元素,jQuery和CSS3过渡效果来制作组织结构图表.可以使用本地数据,或通过ajax调用来完成数据 ...
- 深红色组织结构图表合集PPT模板
模板介绍 精美PPT模板设计,深红色组织结构图表合集PPT模板.一套可视图表幻灯片模板,内含红色多种配色,精美风格设计,动态播放效果,精美实用. 一份设计精美的PPT模板,可以让你在汇报演讲时脱颖而出 ...
- Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图(气泡图)渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
- Excel图表导出高清矢量位图片并裁剪的方法
参考网站: 1. https://zhuanlan.zhihu.com/p/21715153 2. https://www.cnblogs.com/chuqianyu/p/14277807.html ...
- html 组织结构 图表,OrgChart-简单实用的组织结构图表jQuery插件
OrgChart是一款简单实用的组织结构图表jQuery插件.OrgChart通过DOM元素,jQuery和CSS3过渡效果来制作组织结构图表.可以使用本地数据,或通过ajax调用来完成数据的填充. ...
- 手机特效html,支持移动手机的HTML5 Canvas刮刮卡特效
这是一款支持移动手机的HTML5 Canvas刮刮卡特效.该刮刮卡特效通过Canvas来前后两张图片的刮卡效果,支持桌面端和移动端. 使用方法 HTML结构 使用 元素来制作刮卡. ...... CS ...
最新文章
- 2021年4月27日 华为Cloud AI 通用软件开发实习面试(一面)
- Azkaban实战,Command类型单一job示例,任务中执行外部shell脚本,Command类型多job工作flow,HDFS操作任务,MapReduce任务,HIVE任务
- NCF框架揭秘直播来了!红包、抽奖、还有神秘嘉宾…(内含彩蛋)
- c ++类成员函数_C ++编程中的数据成员和成员函数
- 加解密算法、消息摘要、消息认证技术、数字签名与公钥证书
- rfid 标签内存_RFID有源与无源的区别与联系
- 每个特征图1各因子和一个偏置_nlp中的概率图模型
- 注册机patch起什么作用_单相电机的运行电容起什么作用
- 第三方登录页面java_第三方登录接口使用说明(JAVA)
- 梦笔记2022-02-28
- atitit.图片相似度与图片查找的设计 获取图片指纹
- 基于51的光立方制作
- 盛大 传奇 的网游启示录
- 重磅报告 | 《中国企业2020:人工智能应用实践与趋势》
- C#阿里云短信接口API开发步骤
- w10控制面板卸载java_手把手教你解决Win10控制面板无法卸载软件的问题
- iOS UITableView 指定组头悬停位置
- 广播(BroadcastReceiver)---安卓中的四大天王之一
- Oracle中的日期时间函数
- php spa结合,vue路由嵌套SPA的实现方法