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

Javascript InfoVis tools

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

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

◆ 支持子节点扩展

◆ 支持图表拖放

◆ 支持图表缩放

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

 
 
 
 
  
  
  
  //Create a new instance  
  
  
  
      var st = new $jit.ST({  
  
  
  
          'injectInto': 'orgchart',  
  
  
  
          //set duration for the animation  
  
  
  
          duration: 800,  
  
  
  
          //set animation transition type  
  
  
  
          transition: $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 chart  
  
  
  
          request: function(nodeId, level, onComplete) {  
  
  
  
          
  
  
  
        //Generate sample data  
  
  
  
        if(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 
  
  
  
            var tmp = data[i];  
  
  
  
            var obj = {"id":data[i].fullname, "name": " "  + data[i].fullname+" ("+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