当前位置：
凯发k8官方网 >
前端技术
> javascript
>内容正文
javascript
gojs研究，简单图表制作。 -凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
gojs研究，简单图表制作。
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
话不多说，先上图
我在这个中加入了缩略图、鼠标放大缩小等功能。
1 doctype html> 2 <html> 3 <head> 4 <title>flowcharttitle> 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破解，去除水印，下载。
转载于:https://www.cnblogs.com/fumj2012/p/3481541.html
总结
以上是凯发k8官方网为你收集整理的gojs研究，简单图表制作。的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：