GoJS研究，简单图表制作。
2016-04-26 14:26:25 来源: 阅读:
话不多说，先上图
我在这个中加入了缩略图、鼠标放大缩小等功能。
1 <!doctype html> 2 <html> 3 <head> 4 <title>Flowchart</title> 5 <script src="/Common/Scripts/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script> 6 <script src="/Common/Scripts/goDev.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div id="sample"> 10 <div id="myDiagram" style="height: 600px"></div> 11 <div id="myOverview" style="border: solid 1px blue; width: 180px; height: 80px; position: absolute; top: 0px; left: 0px; background-color: aliceblue; z-index: 300"></div> 12 <textarea id="mySavedModel" style="display: none">{"class":"go.GraphLinksModel","linkFromPortIdProperty":"fromPort","linkToPortIdProperty":"toPort","nodeDataArray":[{"key":"2616","category":"A1","text":"宁波智慧物流标准体系"},{"key":"2617","category":"A1","text":"基础通用标准"},{"key":"2622","text":"智慧物流标准化导则"},{"key":"2623","text":"智慧物流术语标准"},{"key":"2624","text":"智慧物流符号与标志标准"},{"key":"2625","text":"分类及代码标准"},{"key":"2626","text":"智慧物流评估标准"},{"key":"2618","category":"A1","text":"智慧物流感知标准"},{"key":"2627","category":"A1","text":"感知设备标准"},{"key":"2640","text":"视频设备技术标准"},{"key":"2641","text":"RFID标准"},{"key":"2642","text":"红外感应设备标准"},{"key":"2643","text":"定位系统设备标准"},{"key":"2644","text":"编码识别设备标准"},{"key":"2645","text":"其他传感器标准"},{"key":"2628","category":"A1","text":"物流通道感知标准"},{"key":"2646","text":"道路感知标准"},{"key":"2647","text":"水路感知标准"},{"key":"2648","text":"铁路感知标准"},{"key":"2649","text":"航空感知标准"},{"key":"2650","text":"管道感知标准"},{"key":"2629","category":"A1","text":"物流节点枢纽感知标准"},{"key":"2651","text":"港口码头感知标准"},{"key":"2652","text":"堆场感知标准"},{"key":"2653","text":"仓库感知标准"},{"key":"2654","text":"货运停车场感知标准"},{"key":"2630","category":"A1","text":"物流装备感知标准"},{"key":"2655","text":"运输工具感知标准"},{"key":"2656","text":"物流单元感知标准"},{"key":"2657","text":"包装、分拣装备感知标准"},{"key":"2658","text":"装卸搬运装备感知标准"},{"key":"2631","category":"A1","text":"企业端信息采集标准"},{"key":"2659","text":"企业信息采集标准"},{"key":"2660","text":"客户信息采集标准"},{"key":"2661","text":"物品信息采集标准"},{"key":"2662","text":"单证信息采集标准"},{"key":"2663","text":"在途信息采集标准"},{"key":"2664","text":"金融信息采集标准"},{"key":"2665","text":"物流资源信息采集标准"},{"key":"2619","category":"A1","text":"智慧物流传输标准"},{"key":"2632","category":"A2","text":"物流政务信息共享与交换标准"},{"key":"2666","text":"基本政务信息共享与交换标准"},{"key":"2667","text":"行业监管信息共享与交换标准"},{"key":"2668","text":"口岸通关信息共享与交换标准"},{"key":"2633","category":"A2","text":"物流基本信息的共享与交换标准"},{"key":"2669","text":"数据与数据元标准"},{"key":"2670","text":"单证标准"},{"key":"2671","text":"报文标准"},{"key":"2634","category":"A2","text":"物流增值业务信息的共享与交换标准"},{"key":"2672","text":"物流金融信息共享与交换标准"},{"key":"2673","text":"物流供应链服务信息共享与交换标准"},{"key":"2620","category":"A1","text":"智慧物流应用标准"},{"key":"2635","category":"A1","text":"平台智慧物流平台标准"},{"key":"2674","text":"公共基础平台标准"},{"key":"2675","text":"专业平台标准"},{"key":"2676","text":"政府监管与决策平台标准"},{"key":"2677","text":"企业智慧信息系统标准"},{"key":"2636","text":"其他"},{"key":"2621","category":"A1","text":"智慧物流安全标准"},{"key":"2637","text":"感知安全标准"},{"key":"2638","text":"传输安全标准"},{"key":"2639","text":"应用安全标准"}],"linkDataArray":[{"from":"2616","to":"0"},{"from":"2616","to":"2617"},{"from":"2617","to":"2622"},{"from":"2617","to":"2623"},{"from":"2617","to":"2624"},{"from":"2617","to":"2625"},{"from":"2617","to":"2626"},{"from":"2616","to":"2618"},{"from":"2618","to":"2627"},{"from":"2627","to":"2640"},{"from":"2627","to":"2641"},{"from":"2627","to":"2642"},{"from":"2627","to":"2643"},{"from":"2627","to":"2644"},{"from":"2627","to":"2645"},{"from":"2618","to":"2628"},{"from":"2628","to":"2646"},{"from":"2628","to":"2647"},{"from":"2628","to":"2648"},{"from":"2628","to":"2649"},{"from":"2628","to":"2650"},{"from":"2618","to":"2629"},{"from":"2629","to":"2651"},{"from":"2629","to":"2652"},{"from":"2629","to":"2653"},{"from":"2629","to":"2654"},{"from":"2618","to":"2630"},{"from":"2630","to":"2655"},{"from":"2630","to":"2656"},{"from":"2630","to":"2657"},{"from":"2630","to":"2658"},{"from":"2618","to":"2631"},{"from":"2631","to":"2659"},{"from":"2631","to":"2660"},{"from":"2631","to":"2661"},{"from":"2631","to":"2662"},{"from":"2631","to":"2663"},{"from":"2631","to":"2664"},{"from":"2631","to":"2665"},{"from":"2616","to":"2619"},{"from":"2619","to":"2632"},{"from":"2632","to":"2666"},{"from":"2632","to":"2667"},{"from":"2632","to":"2668"},{"from":"2619","to":"2633"},{"from":"2633","to":"2669"},{"from":"2633","to":"2670"},{"from":"2633","to":"2671"},{"from":"2619","to":"2634"},{"from":"2634","to":"2672"},{"from":"2634","to":"2673"},{"from":"2616","to":"2620"},{"from":"2620","to":"2635"},{"from":"2635","to":"2674"},{"from":"2635","to":"2675"},{"from":"2635","to":"2676"},{"from":"2635","to":"2677"},{"from":"2620","to":"2636"},{"from":"2616","to":"2621"}, 13 {"from":"2621","to":"2637"},{"from":"2621","to":"2638"},{"from":"2621","to":"2639"}]}</textarea> 14 </div> 15 <script type="text/javascript" id="code"> 16 $().ready(function () { 17 $("#mySavedModel").hide(); 18 $("#myOverview").offset(function (n, c) { 19 newPos = new Object(); 20 newPos.left = $("#myDiagram").offset().left; 21 newPos.top = $("#myDiagram").offset().top; 22 return newPos; 23 }); 24 if (window.goSamples) goSamples(); 25 var GO = go.GraphObject.make; 26 myDiagram = 27 GO(go.Diagram, "myDiagram", 28 { 29 "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, 30 allowCopy: false, 31 allowDelete: false, 32 allowMove: false, 33 initialContentAlignment: go.Spot.Center, 34 initialAutoScale: go.Diagram.UniformToFill, 35 }); 36 myDiagram.layout = 37 GO(go.TreeLayout, 38 { 39 angle: 90, 40 alignment: go.TreeLayout.AlignmentCenterChildren, 41 compaction: go.TreeLayout.CompactionNone 42 }); 43 var str = document.getElementById("mySavedModel").value; 44 myDiagram.model = go.Model.fromJson(str); 45 myDiagram.nodeTemplateMap.add("", 46 GO(go.Node, "Vertical", { 47 locationSpot: go.Spot.Center, 48 isShadowed: true, 49 resizable: false, 50 rotatable: false, 51 layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized 52 }, 53 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 54 GO(go.Panel, "Auto", 55 GO(go.Shape, "Rectangle", 56 { strokeWidth: 1, fill: "#00A9C9" }, 57 new go.Binding("figure", "figure")), 58 GO(go.TextBlock, 59 { 60 font: "bold 13pt 微软雅黑", 61 margin: 8, maxSize: new go.Size(30, NaN), 62 stroke: "#ffffff" 63 }, 64 new go.Binding("stroke", "stroke"), 65 new go.Binding("text", "text").makeTwoWay()), 66 { 67 cursor: "pointer", 68 click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); } 69 } 70 ), 71 GO("TreeExpanderButton") 72 )); 73 //"category":"A1", 74 myDiagram.nodeTemplateMap.add("A1", 75 GO(go.Node, "Vertical", { 76 locationSpot: go.Spot.Center, 77 isShadowed: true, 78 resizable: false, 79 rotatable: false, 80 layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized 81 }, 82 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 83 GO(go.Panel, "Auto", 84 GO(go.Shape, "Rectangle", 85 { strokeWidth: 1, fill: "#00A9C9" }, 86 new go.Binding("figure", "figure")), 87 GO(go.TextBlock, 88 { 89 font: "bold 13pt 微软雅黑", 90 margin: 8, 91 stroke: "#ffffff" 92 }, 93 new go.Binding("stroke", "stroke"), 94 new go.Binding("text", "text").makeTwoWay()), 95 { 96 cursor: "pointer", 97 click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); } 98 } 99 100 101 ), 102 GO("TreeExpanderButton") 103 )); 104 //"category":"A2", 105 myDiagram.nodeTemplateMap.add("A2", 106 GO(go.Node, "Vertical", { 107 locationSpot: go.Spot.Center, 108 isShadowed: true, 109 resizable: false, 110 rotatable: false, 111 layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized 112 }, 113 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 114 GO(go.Panel, "Auto", 115 GO(go.Shape, "Rectangle", 116 { strokeWidth: 1, fill: "#00A9C9" }, 117 new go.Binding("figure", "figure")), 118 GO(go.TextBlock, 119 { 120 font: "bold 13pt 微软雅黑", 121 margin: 8, maxSize: new go.Size(60, NaN), 122 stroke: "#ffffff" 123 }, 124 new go.Binding("stroke", "stroke"), 125 new go.Binding("text", "text").makeTwoWay()), 126 { 127 cursor: "pointer", 128 click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); } 129 } 130 131 132 ), 133 GO("TreeExpanderButton") 134 )); 135 /* 设置链接的线条样式 */ 136 myDiagram.linkTemplate = 137 GO(go.Link, 138 { 139 routing: go.Link.Orthogonal,//AvoidsNodes、Orthogonal 140 corner: 5, 141 toShortLength: 4, relinkableFrom: false, relinkableTo: false, reshapable: false 142 }, 143 new go.Binding("points").makeTwoWay(), 144 GO(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 2 }) 145 ); 146 myOverview = 147 GO(go.Overview, "myOverview", 148 { observed: myDiagram }); 149 }); 150 </script> 151 152 </body> 153 </html>
上面为了方便，把代码直接拷贝了几份，设置了默认,A1,A2三种样式，只是为了区分控件的大小。其实控件的大小在参数里也可以设置，加一个属性"size":"100 100"，在设置节点的时候，加一句new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)即可。
支持购买原版http://www.gojs.net。
最新版1.2.8破解，去除水印，下载。