当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
分享到: 
收藏 +0
1

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

Javascript InfoVis tools

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

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

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

 

 

具体代码及其在线演示请参考原文

 

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

标签: <无>

代码片段(1) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem)
      this.elem = document.getElementById('orgchartloader');
    this.elem.innerHTML = text;
    this.elem.style.left = (480 - this.elem.offsetWidth/2) + 'px';
  }
};


function startorgchart(){
    
    //Create node line
    $jit.ST.Plot.NodeTypes.implement({
        'nodeline': {
          'render': function(node, canvas, animating) {
                if(animating === 'expand' || animating === 'contract') {
                  var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
                  var width  = nconfig.width, height = nconfig.height;
                  var algnPos = this.getAlignedPos(pos, width, height);
                  var ctx = canvas.getCtx(), ort = this.config.orientation;
                  ctx.beginPath();
                  if(ort == 'left' || ort == 'right') {
                      ctx.moveTo(algnPos.x, algnPos.y + height / 2);
                      ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
                  } else {
                      ctx.moveTo(algnPos.x + width / 2, algnPos.y);
                      ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
                  }
                  ctx.stroke();
              }
          }
        }
          
    });
    
    //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);  
            }

        },
        
        onBeforeCompute: function(node){
            Log.write("<div style=\"text-align:center\"><img src=\"/images/loading.gif\"></div>Loading ...");
            $("#orgchartori").fadeOut();
        },
        
        onAfterCompute: function(){
            Log.write("");
            $("#orgchartori").fadeIn();
        },
        
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            label.onclick = function(){
                st.onClick(node.id);
            };
            //set label styles

            var style = label.style;
            style.width = 120 + 'px';
            style.height = 40 + 'px';            
            style.cursor = 'pointer';
            style.color = '#fff';
            style.border = '1px solid #888';
            style.backgroundColor = '#333';
            style.fontSize = '10px';
            style.fontweight = 'bold';
            style.textAlign= 'center';
            style.textDecoration = 'none';
            style.paddingTop = '3px';

        },
        
        onBeforePlotNode: function(node){
            //alert('onbefore');
            if (node.selected) {
                node.data.$color = "#000";
            }
            else {
                delete node.data.$color;
            }
        },
        
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#333333";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    
    //load json data
    var json = "{id:\"terry li\", name:\"<div class='orgchartnode'>Terry Li</div>(General Manager)\", data:{}, children:[{id:\"Jack lu\", name:\"<div class='orgchartnode'>Jack Lu</div>(QA Manager)\", data:{},children:[]},{id:\"Michelle lu\", name:\"<div class='orgchartnode'>Michelle Lu</div>(Dev Manager)\", data:{},children:[]}]}";   
    
    st.loadJSON(eval( '(' + json + ')' ));
    //compute node positions and layout
    st.compute();
    //emulate a click on the root node.
    st.onClick(st.root);
    //end
    
    //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();
                }
            });    
    });    
    //end

}


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(7)

  • 1楼:钟小华 发表于 2011-06-30 08:11 回复此评论
    图和链接网址都打不开?
  • 2楼:gbin1 发表于 2011-06-30 10:36 回复此评论

    可以打开啊

  • 3楼:流海 发表于 2013-07-05 08:23 回复此评论
    jit有中文文档没有?它的api看起来好痛苦
  • 4楼:抽象现实 发表于 2013-12-02 11:45 回复此评论
    非常感谢!!!
  • 5楼:Brant_Feng 发表于 2014-01-22 10:51 回复此评论
    我累个去,太NB了!顶!
  • 6楼:醉生梦死丶 发表于 2014-01-27 11:38 回复此评论
    初始化的时候怎么只显示3层结构啊,能不能全部显示出来
  • 7楼:lucky芳 发表于 2015-05-08 16:16 回复此评论
    怎么调整初始化时root节点的位置呢?我调整了node的位置后,发现线的位置又不对了。。大神,求解呀