<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jTopo</title>
<script src="../library/jquery/jquery-3.2.1.min.js"></script>
<!-- <script src="../library/jTopo/jtopo-0.4.8-min.js"></script> -->
<script src="../library/jTopo/jtopo-min.js"></script>
</head>
<body>
<canvas width="1920" height="1080" id="canvas"></canvas>
<script type="text/javascript">
$(document).ready(function(){
// id 节点唯一标识
// name 节点名字
// type 节点类型
// pid 父节点标识
// error “0”无异常 “1”有异常
// errorMessage 异常内容
var jsonData = [{
"id": "root",
"name": "Root根目录",
"type": "1",
"pid": ""
}, {
"id": "0001",
"name": "主机001",
"type": "1",
"error": "1",
"errorMessage": "二级告警!",
"pid": "root"
}, {
"id": "000101",
"name": "host01",
"type": "1",
"pid": "0001"
}, {
"id": "000102",
"name": "host02失踪了",
"error": "0",
"type": "2",
"pid": "0001"
}, {
"id": "000201",
"name": "host03",
"type": "2",
"pid": "0002"
}, {
"id": "000202",
"name": "host04",
"type": "1",
"pid": "0002"
},{
"id": "0002021",
"name": "host04",
"type": "2",
"pid": "000202"
},{
"id": "0002022",
"name": "host04",
"type": "1",
"pid": "000202"
},{
"id": "0002023",
"name": "host04",
"type": "3",
"pid": "000202"
},{
"id": "000203",
"name": "host05",
"type": "1",
"pid": "0002"
}, {
"id": "324234",
"name": "host213123",
"type": "3",
"pid": "000203"
},{
"id": "3242341",
"name": "host2131231",
"type": "1",
"pid": "000203"
},{
"id": "32423412",
"name": "host2131231他",
"type": "4",
"pid": "3242341"
},{
"id": "32423413",
"name": "host2131231俄",
"type": "1",
"pid": "3242341"
},{
"id": "32423414",
"name": "host2131231啊",
"type": "4",
"pid": "3242341"
},{
"id": "3242342",
"name": "host2131232",
"type": "2",
"pid": "000203"
},{
"id": "32423567",
"name": "host哈哈哈",
"type": "4",
"pid": "3242342"
},{
"id": "324235671",
"name": "host哈哈哈1",
"type": "4",
"pid": "3242342"
},{
"id": "324235672",
"name": "host哈哈哈2",
"type": "2",
"pid": "3242342"
},{
"id": "324235673",
"name": "host哈哈哈3",
"type": "3",
"pid": "3242342"
},{
"id": "324235674",
"name": "host哈哈哈4",
"type": "4",
"pid": "3242342"
},{
"id": "3242356741",
"name": "host哈哈哈41",
"type": "4",
"pid": "324235674"
},{
"id": "3242356742",
"name": "host哈哈哈42",
"type": "4",
"pid": "324235674"
},{
"id": "32423567421",
"name": "host哈哈哈421",
"type": "4",
"pid": "3242356742"
},{
"id": "32423567422",
"name": "host哈哈哈421",
"type": "4",
"pid": "3242356742"
},{
"id": "0002",
"name": "主机002",
"type": "1",
"pid": "root"
}];
var height = window.innerHeight;
var width = window.innerWidth;
document.getElementById("canvas").width = width;
document.getElementById("canvas").height = height;
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
stage.eagleEye.visible = true;
var scene = new JTopo.Scene();
stage.wheelZoom = 0.85;
stage.add(scene);
scene.background = '../image/bg.jpg';
for (var x = 0; x < jsonData.length; x++) {
creatNode(jsonData[x]);
}
// 画线
for (var x = 0; x < jsonData.length; x++) {
creatLink(jsonData[x]);
}
scene.findElements(function(e){
if(e.error == "1"){
setInterval(function(){
if(e.alarm == e.errorMessage){
e.alarm = null;
}else{
e.alarm = e.errorMessage;
}
}, 600);
}
});
scene.doLayout(JTopo.layout.TreeLayout('down', 111, 222));
function creatNode(param){
var node = new JTopo.Node(param.name);
if(param.id == "0002" || param.id == "000102"){
node.alarm = '这是一个服务器！！！';
node.alarmColor = '0,255,0';
node.alarmAlpha = 0.9;
}
node.flagId = param.id;
node.error = param.error;
node.errorMessage = param.errorMessage;
node.setSize(88, 88);
node.shadow = "true";
node.font = "17px Consolas";
node.textPosition = "Bottom_Center";
node.fontColor = "255,255,0";
if(param.type == 1){
node.setImage('../image/222.png');
//node.setSize(50, 35);
}else if(param.type == 2){
node.setImage('../image/222.png');
//node.setSize(35, 30);
}else if(param.type == 3){
node.setImage('../image/222.png');
//node.setSize(35, 30);
}else{
node.setImage('../image/222.png');
//node.setSize(35, 30);
}
scene.add(node);
}
function creatLink(param){
if(param.id != "root"){
var nodeZi = "";
var nodeFu = "";
scene.findElements(function(e){
if(e.flagId == param.id){
nodeZi = e;
}
});
scene.findElements(function(e){
if(e.flagId == param.pid){
nodeFu = e;
}
});
var link = new JTopo.Link(nodeFu, nodeZi);
//link.dashedPattern = 3;
link.arrowsRadius = 10;
link.lineWidth = 2; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = '0, 255, 255';
scene.add(link);
}
}
});
</script>
</body>
</html>
Jtopo读取Json生成树状拓扑图.rar （5个子文件） 
bg.jpg 56KB
aaa.html 5KB
222.png 95KB
jtopo-min.js 77KB jquery-3.2.1.min.js 85KB资源评论
大克豪斯2018-05-30需要自己调整下
qq_258387612018-08-22把图片和资源的路径改一下就能用，很有参考价值。- qq_222154492019-07-06一般吧，要修改很多
淼烨梦魂2020-09-07一般般 有点参考价值，意义不大
