GoJS使用总结

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;//获取点击节点的数据
	 })
展开阅读全文

没有更多推荐了,返回首页