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

相關資料：http://thejit.org/

文章來源：使用Javascript來實現的超炫組織結構圖(Organization Chart)