GoJS研究，簡單圖表製做。
話很少說，先上圖javascript
我在這個中加入了縮略圖、鼠標放大縮小等功能。html
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)便可。java
支持購買原版http://www.gojs.net。node
最新版1.2.8破解，去除水印，下載。jquery
相關文章
- 1. GoJS圖表組件簡介
- 2. IMAP簡單研究
- 3. ESP8266 簡單研究 ESP8285 研究
- 4. 使用Highcharts製做簡單圖表
- 5. Python製做簡單表格
- 6. vue 使用gojs繪製簡單的流程圖
- 7. android framework層簡單研究
- 8. ExpandableListView的簡單研究
- 9. gojs 圖表(Diagram)佈局
- 10. 可視化圖表庫--goJS
- 更多相關文章...
- • jQuery Mobile 表單 - jQuery Mobile 教程
- • Thymeleaf表單 - Thymeleaf 教程
- • Github 簡明教程
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章