JavaScript来实现的超炫组织结构图

开发 前端
最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方案,这里分享给大家。

Javascript InfoVis tools

这个开源的javascript类库可以生成非常炫酷的结构和图形,我选择了其中的一种spacetree类型做为我的组织结构图基础,这种图形可以支持一下特性:

◆ 支持向上下左右四个方向展开图表

◆ 支持子节点扩展

◆ 支持图表拖放

◆ 支持图表缩放

整个类库异常强大,非常合适复杂的图形功能需求,如下:

 

 

  1. //Create a new instance  
  2.     var st = new $jit.ST({  
  3.         'injectInto''orgchart',  
  4.         //set duration for the animation  
  5.         duration: 800,  
  6.         //set animation transition type  
  7.         transition: $jit.Trans.Quart.easeInOut,  
  8.         levelDistance: 50,  
  9.         levelsToShow: 1,  
  10.         Node: {  
  11.             height: 45,  
  12.             width: 120,  
  13.             type: 'nodeline',  
  14.             color:'#23A4FF',  
  15.             lineWidth: 2,  
  16.             align:"center",  
  17.             overridable: false 
  18.         },  
  19.           
  20.         Edge: {  
  21.             type: 'bezier',  
  22.             lineWidth: 2,  
  23.             color:'#23A4FF',  
  24.             overridable: true 
  25.         },  
  26.           
  27.     //Retrieve the json data from database and create json objects for org chart  
  28.         request: function(nodeId, level, onComplete) {  
  29.         
  30.       //Generate sample data  
  31.       if(nodeId!='peter wang'&&nodeId!='William chen'){  
  32.         var data= [{fullname:'peter wang',title:'engineer'},{fullname:'William chen',title:'senior engineer'}];  
  33.         var objs = [];  
  34.         for(var i=0;i
  35.           var tmp = data[i];  
  36.           var obj = {"id":data[i].fullname, "name""" + data[i].fullname+"
    ("
    +data[i].title + ")"};  
  37.           objs.push(obj);  
  38.         }  
  39.            
  40.         var nodeobjs={};  
  41.         nodeobjs.id =  nodeId;  
  42.         nodeobjs.children =  objs;  
  43.         onComplete.onComplete(nodeId, nodeobjs);    
  44.       }else{  
  45.         var nodeobjs={};  
  46.         onComplete.onComplete(nodeId, nodeobjs);    
  47.       }  
  48.  
  49.         }, 

 

以上代码创建一个实例,注意request部分,这段代码用来取出点击节点后需要显示的字节点,在实际应用中,我们把数据库中取出的数据生成json对象后注入这里生成子节点。

  1. //Change chart direction  
  2.   $("#top").click(function(){  
  3.       $("#orgchartori").fadeOut();  
  4.             st.switchPosition($("#top").attr("id"), "animate", {  
  5.                 onComplete: function(){  
  6.                     $("#orgchartori").fadeIn();  
  7.                 }  
  8.             });   
  9.   });  
  10.     
  11.   $("#bottom").click(function(){  
  12.       $("#orgchartori").fadeOut();  
  13.             st.switchPosition($("#bottom").attr("id"), "animate", {  
  14.                 onComplete: function(){  
  15.                     $("#orgchartori").fadeIn();  
  16.                 }  
  17.             });   
  18.   });  
  19.  
  20.   $("#right").click(function(){  
  21.       $("#orgchartori").fadeOut();  
  22.             st.switchPosition($("#left").attr("id"), "animate", {  
  23.                 onComplete: function(){  
  24.                     $("#orgchartori").fadeIn();  
  25.                 }  
  26.             });   
  27.   });  
  28.  
  29.   $("#left").click(function(){  
  30.       $("#orgchartori").fadeOut();  
  31.             st.switchPosition($("#right").attr("id"), "animate", {  
  32.                 onComplete: function(){  
  33.           $("#orgchartori").fadeIn();  
  34.                 }  
  35.             });   
  36.   });   

以上代码用来控制组织结构图图形展示方向,效果请参考演示。

在线演示 在线调试

拖放及其缩放特效演示请查看如下应用案例。

应用案例:http://www.triplifes.com

相关资料:http://thejit.org/

文章来源:使用Javascript来实现的超炫组织结构图(Organization Chart)

责任编辑:陈贻新 来源: gbin1.com
相关推荐

2020-05-06 15:59:07

JavaScript程序员技术

2011-06-14 18:37:50

Flash

2020-05-09 11:20:02

Java结构图虚拟机

2011-06-21 13:31:13

JavaScript

2022-08-04 13:58:54

SeabornFacetGrid代码

2009-04-13 10:52:59

网络拓扑摩卡网络

2012-07-09 09:31:53

silverlight

2015-01-08 09:37:54

数据中心结构图机房结构图

2010-07-05 15:01:21

UML静态结构图

2010-07-05 12:37:29

用Visio画UML图

2010-07-05 14:48:25

UML静态结构图

2013-04-17 10:16:25

语言

2012-03-13 14:06:39

JavaJ2EE

2022-09-26 09:01:23

JavaScript浅拷贝深拷贝

2011-04-18 17:17:45

CSSweb开发

2010-07-05 13:08:42

用Visio画UML图

2015-03-25 09:15:38

DxR算法定位结构路由表

2021-08-09 06:57:42

代码重定位Linux

2010-07-12 10:57:59

UML静态结构图

2020-08-10 14:46:30

JavaScriptStack
点赞
收藏

51CTO技术栈公众号