绘制拓扑图
需求：绘制一个机构各个部门下机器的申请情况关系拓扑图。
可以用gojs这个插件，不过仅限学习研究实验演示，不作商业用途。
1.html中定义一块画图区域
<div id="myDiagram"></div>
<script type="text/javascript"> window.onload = init();</script>
<script type="text/javascript">var AjaxRequestBack=false;var IdList;function init() {if (window.goSamples) goSamples();var $ = go.GraphObject.make;//整个拓扑图的位置myDiagram = $(go.Diagram, "myDiagram",{initialContentAlignment: go.Spot.TopCenter});//节点的图片，根据传进来的参数获取相对应的图片function nodeTypeImage(type) {if (type.charAt(0) === "0") return "images/0.png";if (type.charAt(0) === "1") return "images/1.png";if (type.charAt(0) === "2") return "images/2.png";return "images/0.png";}function nodeProblemConverter(msg) {if (msg) return "red";return null;}//判断节点左边形状function nodeOperationConverter(s) {if (s >= 2) return "TriangleDown";if (s >= 1) return "Rectangle";return "Circle";}//判断节点右边形状的颜色function nodeStatusConverter(s) {if (s >= 2) return "red";if (s >= 1) return "green";return "green";}myDiagram.nodeTemplate =$(go.Node, "Vertical",{ selectable: true,mouseOver: function (e, obj) {//鼠标进入响应的事件方法//nodeDoubleClick(e, obj) //事件调用方法}},{locationObjectName: "ICON" },$(go.Panel, "Spot",$(go.Panel, "Auto",{ name: "ICON" }, $(go.Shape,{ fill: null, portId: "", strokeWidth: 0,stroke: null },new go.Binding("background", "problem", nodeProblemConverter)), $(go.Picture,{ margin: 0 },{ desiredSize: new go.Size(60, 60) },new go.Binding("source", "type", nodeTypeImage))), //这里是用节点的类型，即是用的图片$(go.Shape, "Circle",{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //TopLeft显示的位置width: 0, height: 0, fill: "Green"}, new go.Binding("fill", "status", nodeStatusConverter)) //这里是用节点状态参数),//这里是节点文字的样式$(go.TextBlock,{ font: "bold 7px Helvetica, bold Arial, sans-serif",stroke: "black", margin: 3 },new go.Binding("text")));//设置线条的颜色function linkProblemConverter(msg) {if (msg) return "red";return "#cccccc";}myDiagram.linkTemplate =$(go.Link, go.Link.AvoidsNodes,{ corner: 3 }, //控制线的转弯的弧度$(go.Shape,{ strokeWidth: 1 }, //控制线条的粗细new go.Binding("stroke", "problem", linkProblemConverter)));//节点的布局myDiagram.layout = $(go.LayeredDigraphLayout,{ direction: 270, //拓扑图的方向layerSpacing: 10,columnSpacing: 25,setsPortSpots: false});//加载数据load();myDiagram.makeImage({scale: 1,background: "AntiqueWhite",type: "image/jpeg",details: 0.05});}function load() {var str = <%=sbstr%>;myDiagram.model = go.Model.fromJson(str);var arr = myDiagram.model.nodeDataArray;for (var i = 0; i < arr.length; i++) {// alert(arr[i].text);}}</script>