加入收藏 | 设为首页 | 会员中心 | 我要投稿 晋中站长网 (https://www.0354zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 模式 > 正文

Javascript实现超炫组织结构图(Organization Chart)

发布时间:2018-10-14 08:50:47 所属栏目:模式 来源:站长网
导读:最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方

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

Javascript InfoVis tools

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

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

支持子节点扩展

支持图表拖放

支持图表缩放

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

Javascript实现超炫组织结构图(Organization Chart)

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] //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对象后注入这里生成子节点。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] //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)

(编辑:晋中站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读