温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用JavaScript实现炫酷组织结构图

发布时间:2021-07-21 09:45:39 来源:亿速云 阅读:237 作者:chen 栏目:web开发

这篇文章主要介绍“怎么用JavaScript实现炫酷组织结构图”,在日常操作中,相信很多人在怎么用JavaScript实现炫酷组织结构图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用JavaScript实现炫酷组织结构图”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Javascript InfoVis tools

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

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

◆ 支持子节点扩展

◆ 支持图表拖放

◆ 支持图表缩放

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

怎么用JavaScript实现炫酷组织结构图

 
//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++) { span  <>          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();                  }              });     });

以上代码用来控制组织结构图图形展示方向,效果请参考演示。

到此,关于“怎么用JavaScript实现炫酷组织结构图”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI