作图拓扑图

绘制拓扑图
需求：绘制一个机构各个部门下机器的申请情况关系拓扑图。
可以用gojs这个插件，不过仅限学习研究实验演示，不作商业用途。
1.html中定义一块画图区域

<div id="myDiagram"></div>

2.文档末加载脚本

<script type="text/javascript">
   window.onload = init();
</script>

3.脚本

<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>