GoJS研究,简单图表制作。

话不多说,先上图

我在这个中加入了缩略图、鼠标放大缩小等功能。

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

上面为了方便,把代码直接拷贝了几份,设置了默认,A1,A2三种样式,只是为了区分控件的大小。其实控件的大小在参数里也可以设置,加一个属性"size":"100 100",在设置节点的时候,加一句new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)即可。

支持购买原版http://www.gojs.net

最新版1.2.8破解,去除水印,下载

posted @ 2013-12-19 09:53  fumj2012  阅读(5145)  评论(1编辑  收藏  举报