最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方案,这里分享给大家。
Javascript InfoVis tools
这个开源的javascript类库可以生成非常炫酷的结构和图形,我选择了其中的一种spacetree类型做为我的组织结构图基础,这种图形可以支持一下特性:
- 支持向上下左右四个方向展开图表
- 支持子节点扩展
- 支持图表拖放
- 支持图表缩放
整个类库异常强大,非常合适复杂的图形功能需求,如下:
?
?
具体代码及其在线演示请参考原文
?
文章来源:使用Javascript来实现的超炫组织结构图(Organization Chart)
1 楼
jilo88
2011-07-20
非常感谢,我的项目中也要用到组织结构图,幸好有你的介绍,不然真不知要找到什么时候。如果不介意,请您把使用方式与心得讲讲,并把您的效果打包放出来,那就非常感谢了。
2 楼
jjfat
2011-07-26
jilo88 写道
非常感谢,我的项目中也要用到组织结构图,幸好有你的介绍,不然真不知要找到什么时候。如果不介意,请您把使用方式与心得讲讲,并把您的效果打包放出来,那就非常感谢了。
代码你可以直接去演示里下载,都是开源的,没什么问题。 具体怎么用,最好方式是你自己去jsfiddle里调试就好了。