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

Javascript InfoVis tools

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

• 支持向上下左右四个方向展开图表
• 支持子节点扩展
• 支持图表拖放
• 支持图表缩放

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

    //Create a new instancevar st = new $jit.ST({'injectInto': 'orgchart',//set duration for the animationduration: 800,//set animation transition typetransition: $jit.Trans.Quart.easeInOut,levelDistance: 50,levelsToShow: 1,Node: {height: 45,width: 120,type: 'nodeline',color:'#23A4FF',lineWidth: 2,align:"center",overridable: false},Edge: {type: 'bezier',lineWidth: 2,color:'#23A4FF',overridable: true},//Retrieve the json data from database and create json objects for org chartrequest: function(nodeId, level, onComplete) {//Generate sample dataif(nodeId!='peter wang'&&nodeId!='William chen'){var data= [{fullname:'peter wang',title:'engineer'},{fullname:'William chen',title:'senior engineer'}];var objs = [];for(var i=0;i<data.length;i++) {var tmp = data[i];var obj = {"id":data[i].fullname, "name": "<div class='orgchartnode'>" + data[i].fullname+"</div>("+data[i].title + ")"};objs.push(obj);}var nodeobjs={};nodeobjs.id =  nodeId;nodeobjs.children =  objs;onComplete.onComplete(nodeId, nodeobjs);  }else{var nodeobjs={};onComplete.onComplete(nodeId, nodeobjs);  }},

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

 //Change chart direction$("#top").click(function(){$("#orgchartori").fadeOut();st.switchPosition($("#top").attr("id"), "animate", {onComplete: function(){$("#orgchartori").fadeIn();}}); });$("#bottom").click(function(){$("#orgchartori").fadeOut();st.switchPosition($("#bottom").attr("id"), "animate", {onComplete: function(){$("#orgchartori").fadeIn();}}); });$("#right").click(function(){$("#orgchartori").fadeOut();st.switchPosition($("#left").attr("id"), "animate", {onComplete: function(){$("#orgchartori").fadeIn();}}); });$("#left").click(function(){$("#orgchartori").fadeOut();st.switchPosition($("#right").attr("id"), "animate", {onComplete: function(){$("#orgchartori").fadeIn();}}); });

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

在线演示 在线调试

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

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

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

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