废话先不多说,先上图;这是一个模拟设备状态的拓扑图;图中节点右上角的圆形图标绿色代表正常,红色代表设备一次;在图片的左上角 是用来获取节点的详细信息的。具体方法在js中有注释,
因为这只是个教程,所以在写代码上不是很规范。所以希望大家多多见谅。而且因为本人对这个插件的研究也有限,有什么不对的也希望多多交流 谢谢!
接着上代码。这是前端html和js代码;首先介绍下该功能的实现方法。是利用
GoJS插件。 网址http://gojs.net/latest/index.html;
其中官网的包可以在这里下载:http://gojs.net/latest/doc/download.html;官网提供的包是英文的包括注释也是,而且不是很详细。所有我在本例子中 将关键的代码全部做了注释。基本上有点基础应该都能弄明白;为了直观,我直接将代码注释写在了代码所在的位置;这个插件在官网提供了很多例子。也有APS文档。但是本人觉得他的API文档写的有点杂。很难看懂,跟别说那些英语基础不好的人了。但是没关系,后面我会介绍一下如何巧妙不看文档也能做出不同效果的拓扑图;或者说实现你想要的拓扑图;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html> 4 <head> 5 <title>安防点位拓扑图</title> 6 <!-- /* Copyright ?1998-2013 by Northwoods Software Corporation. */ --> 7 <link href="goSamples.css" rel="stylesheet" type="text/css" /> 8 <script type="text/javascript" src="go.js"></script> 9 <!-- <script type="text/javascript" src="goSamples.js"></script>--> 10 <script src="../resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 var AjaxRequestBack=false; 13 var IdList; 14 function init() { 15 if (window.goSamples) goSamples(); 16 var $ = go.GraphObject.make; 17 18 myDiagram = $(go.Diagram, "myDiagram", 19 { 20 initialContentAlignment: go.Spot.Center //整个拓扑图的位置 21 }); 22 //节点的图片,根据传进来的参数获取相对应的图片 23 function nodeTypeImage(type) { 24 if (type.charAt(0) === "1") return "images/1.png"; 25 if (type.charAt(0) === "2") return "images/2.png"; 26 if (type.charAt(0) === "3") return "images/3.png"; 27 if (type.charAt(0) === "4") return "images/4.png"; 28 if (type.charAt(0) === "5") return "images/5.png"; 29 if (type.charAt(0) === "6") return "images/6.png"; 30 if (type.charAt(0) === "7") return "images/7.png"; 31 if (type.charAt(0) === "8") return "images/8.png"; 32 return "images/0.png"; 33 } 34 35 function nodeProblemConverter(msg) { 36 if (msg) return "red"; 37 return null; 38 } 39 //判断节点左边形状 40 function nodeOperationConverter(s) { 41 if (s >= 2) return "TriangleDown"; 42 if (s >= 1) return "Rectangle"; 43 return "Circle"; 44 } 45 //判断节点右边形状的颜色 46 function nodeStatusConverter(s) { 47 if (s >= 2) return "red"; 48 if (s >= 1) return "green"; 49 return