GoJS使用总结

最新推荐文章于 2024-07-18 11:13:00 发布

weixin_41881346

最新推荐文章于 2024-07-18 11:13:00 发布

阅读量2.5k

点赞数 2

文章标签： go.js GoJS

本文链接：https://blog.csdn.net/weixin_41881346/article/details/86077738

版权

GoJS官方文档，官方案例

项目中运用到简单的总结一下，GoJS是一个依赖于HTML5功能的JavaScript库，所以您需要确保您的页面声明它是HTML5文档

<!DOCTYPE html> <!-- 该声明为html5-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 	 <script src="go-debug.js"></script>    
</head>
	<!--每个图形都要有一个div包含 设置宽高-->
	<div id="myDiagramDiv"  style=""width:1000px; height:500px; background-color: #DAE4E4;margin: 0 auto"></div> 
</body>
</html>

官方下载的js是有水印的需要去除去水印js文件
在这里插入图片描述
在js中创建图表（需要用刚才创建的div的id）

var $ = go.GraphObject.make; //如果项目中用到了$需要更换变量名称以免冲突
var myDiagram = $(go.Diagram, "myDiagramDiv",{
	 "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone,//禁止滚动
      "initialContentAlignment": go.Spot.Top, // 居中显示内容
      "layout": $go(go.TreeLayout,{ angle: 90, layerSpacing: 35 }), //图表展示角度angle：0 为横向 angle：90 为纵向
	 click:function(){//点击空白区域取消选中时
    	   clickNode=""
      }
});

这样就创建一个空的图表
在这里插入图片描述

取消图表选中边框直接设置canvas样式

     canvas{
            outline: none;
        }

数据绑定

//定义模板
 myDiagram.nodeTemplate = $go(go.Node, "Horizontal",{
       background: "rgba(242, 242, 242, 1)" ,movable:false},//节点样式的设置
        new go.Binding("background", "nodeType",function(v){ 
               if(v==1){
                   return "rgba(204, 254, 254, 1)"
               }else{
                   return "rgba(242, 242, 242, 1)"
               }
         }),
           $go(go.Panel, "Vertical",{ margin: 3 ,width:150},//矩形容器内边距以及宽度设置
           $go(go.TextBlock, "Default Text",{ margin: 12, stroke: "#000", font: "bold 16px sans-serif"},//文本
           //树状图根据后端传的数据设置名称
           new go.Binding("text","treeNodeName"))
           )
 );
 var  myModel = $go(go.TreeModel);
           myModel.nodeDataArray =[{
               "key":"1",
               "parent":"0",
               "treeNodeName":"前哨",
               "nodeType":"0"
           },{
               "key":"2",
               "parent":"1",
               "treeNodeName":"手术",
               "nodeType":"1"
           }]
           myDiagram.model = myModel;

效果在这里插入图片描述
连线设置

   myDiagram.linkTemplate =$go(go.Link, go.Link.Orthogonal,
		      { deletable: false, corner: 6 , selectable: false},//连线圆角角度
		      $go(go.Shape,
		        { strokeWidth: 2 ,toArrow: "OpenTriangle",stroke: "#0299CC",}  //线条宽度
		      )
        );

效果在这里插入图片描述
右键编辑

 myDiagram.nodeTemplate.contextMenu =
	      $go(go.Adornment, "Vertical",
	      {width:100},
	        $go("ContextMenuButton",
	          $go(go.TextBlock, "编辑"),
	          {
	            click: function(e, obj) {
	                var node = obj.part.adornedPart;
	        	    branchDataPar=node.data;//获取节点的信息
	            }
	          }
	        ),
	        $go("ContextMenuButton",
	  	          $go(go.TextBlock, "添加"),
	  	          {
	  	            click: function(e, obj) {
	  	      	   //可以进行数据的操作
  	            }
  	          }
  	        ),
        $go("ContextMenuButton",
          $go(go.TextBlock, "删除"),
          {
            click: function(e, obj) {
          
            }
          }
        )
      );

效果
在这里插入图片描述
右键点击事件的监听

	 myDiagram.addDiagramListener("ObjectContextClicked",function(e){
		 var part=e.subject.part
		 clickNode=part.data;//获取点击节点的数据
	 })

weixin_41881346

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫