怎么用JavaScript實(shí)現(xiàn)炫酷組織結(jié)構(gòu)圖

這篇文章主要介紹“怎么用JavaScript實(shí)現(xiàn)炫酷組織結(jié)構(gòu)圖”，在日常操作中，相信很多人在怎么用JavaScript實(shí)現(xiàn)炫酷組織結(jié)構(gòu)圖問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用JavaScript實(shí)現(xiàn)炫酷組織結(jié)構(gòu)圖”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

Javascript InfoVis tools

這個(gè)開(kāi)源的javascript類庫(kù)可以生成非常炫酷的結(jié)構(gòu)和圖形，我選擇了其中的一種spacetree類型做為我的組織結(jié)構(gòu)圖基礎(chǔ)，這種圖形可以支持一下特性：

◆ 支持向上下左右四個(gè)方向展開(kāi)圖表

◆ 支持子節(jié)點(diǎn)擴(kuò)展

◆ 支持圖表拖放

◆ 支持圖表縮放

整個(gè)類庫(kù)異常強(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<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);          }           },

以上代碼創(chuàng)建一個(gè)實(shí)例，注意request部分，這段代碼用來(lái)取出點(diǎn)擊節(jié)點(diǎn)后需要顯示的字節(jié)點(diǎn)，在實(shí)際應(yīng)用中，我們把數(shù)據(jù)庫(kù)中取出的數(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();                  }              });     });

以上代碼用來(lái)控制組織結(jié)構(gòu)圖圖形展示方向，效果請(qǐng)參考演示。

到此，關(guān)于“怎么用JavaScript實(shí)現(xiàn)炫酷組織結(jié)構(gòu)圖”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！