最近有個內部項目需要使用組織結構圖(organization chart)， 尋找了一些開源的項目及其類庫，發現竟然沒有現成的JS類庫可以使用，找到一些簡單的JS實現，不過界面及其操作及其簡單，不過功夫不負有心人，經過幾天國內國外的搜索，找到了一個非常好的解決方案，這里分享給大家。

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<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)