gbin1

最近有个内部项目需要使用组织结构图(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)

分类:

技术点:

相关文章: