组织机构图
Serical
8月 10, 2017
一、组件选择
二、备用代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js_lib/jit/Spacetree.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/js_lib/jit/base.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js_lib/jit/jit-yc.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
init();
});
function init(){
//init data
var json = {
id: "node0",
name: "中国人民银行",
children: [{
id: "node1",
name: "董事会",
children: [{
id: "node3",
name: "董事长",
children: [{
id: "node5",
name: "行长",
children: ${root}
}]
}]
}, {
id: "node2",
name: "监事会",
data: {},
children: [{
id: "node4",
name: "监事长"
}]
}]
};
//end
//init Spacetree
//Create a new ST instance
var st = new $jit.ST({
orientation: 'top', // 根节点在最上面模式
constrained: false, // 配合levelsToShow，显示所有层级的节点
levelsToShow: 10, // 注意div[infovis]的高度宽度
offsetY: 200,
//id of viz container element
injectInto: 'infovis',
//set duration for the animation
//duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//enable panning
Navigation: {
enable:true,
panning:true
},
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 90,
width: 20,
type: 'rectangle',
color: '#aaa', // 动画框的颜色
overridable: true
},
Edge: {
type: 'bezier',
overridable: true
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.name;
//set label styles
var style = label.style;
style.width = 17 + 'px';
style.height = 90 + 'px';
style.cursor = 'pointer';
style.color = '#333'; // 字体颜色
style.fontSize = '0.8em';
style.textAlign= 'center';
style.paddingTop = '3px';
if(label.id == "node0") {
style.width = 150 + 'px'; // 根节点文字宽度
style.height = 20 + 'px'; // 根节点文字高度
}
},
//This method is called right before plotting
//a node. It's useful for changing an individual node
//style properties before plotting it.
//The data properties prefixed with a dollar
//sign will override the global node style properties.
onBeforePlotNode: function(node){
//add some color to the nodes in the path between the
//root node and the selected node.
if (node.selected) {
node.data.$color = "#aaa"; // 根节点颜色
node.data.$width = 150; // 根节点动画宽度
node.data.$height = 20; // 根节点动画高度
}
else {
delete node.data.$color;
//if the node belongs to the last plotted level
if(!node.anySubnode("exist")) {
//count children number
var count = 0;
node.eachSubnode(function(n) { count++; });
//assign a node color based on
//how many children it has
node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
}
}
},
//This method is called right before plotting
//an edge. It's useful for changing an individual edge
//style properties before plotting it.
//Edge data proprties prefixed with a dollar sign will
//override the Edge global style properties.
onBeforePlotLine: function(adj){
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$color = "#eed";
adj.data.$lineWidth = 3;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});
//load json data
st.loadJSON(json);
//compute node positions and layout
st.compute();
//optional: make a translation of the tree
st.geom.translate(new $jit.Complex(-200, 0), "current");
//emulate a click on the root node.
st.onClick(st.root);
}
</script>
</head>
<body>
<div id="infovis" style="width: 100%;height: 100%;"></div>
</body>
</html>