建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript來實(shí)現(xiàn)的超炫組織結(jié)構(gòu)圖
Javascript InfoVis tools
這個(gè)開源的javascript類庫可以生成非常炫酷的結(jié)構(gòu)和圖形，我選擇了其中的一種spacetree類型做為我的組織結(jié)構(gòu)圖基礎(chǔ)，這種圖形可以支持一下特性：
◆ 支持向上下左右四個(gè)方向展開圖表
◆ 支持子節(jié)點(diǎn)擴(kuò)展
◆ 支持圖表拖放
◆ 支持圖表縮放
整個(gè)類庫異常強(qiáng)大，非常合適復(fù)雜的圖形功能需求，如下：
- //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);
- }
- },
以上代碼創(chuàng)建一個(gè)實(shí)例，注意request部分，這段代碼用來取出點(diǎn)擊節(jié)點(diǎn)后需要顯示的字節(jié)點(diǎn)，在實(shí)際應(yīng)用中，我們把數(shù)據(jù)庫中取出的數(shù)據(jù)生成json對(duì)象后注入這里生成子節(jié)點(diǎn)。
- //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();
- }
- });
- });
以上代碼用來控制組織結(jié)構(gòu)圖圖形展示方向，效果請(qǐng)參考演示。
在線演示 在線調(diào)試
拖放及其縮放特效演示請(qǐng)查看如下應(yīng)用案例。
應(yīng)用案例：http://www.triplifes.com
相關(guān)資料：http://thejit.org/
文章來源：使用Javascript來實(shí)現(xiàn)的超炫組織結(jié)構(gòu)圖(Organization Chart)
當(dāng)前題目：JavaScript來實(shí)現(xiàn)的超炫組織結(jié)構(gòu)圖
鏈接URL：http://fisionsoft.com.cn/article/ccdisjc.html
