GoJs探索之路

最新推荐文章于 2024-06-13 14:26:56 发布

yeeyangx

最新推荐文章于 2024-06-13 14:26:56 发布

阅读量290

点赞数

文章标签：数据可视化

本文链接：https://blog.csdn.net/yeeyangx/article/details/109333013

版权

由于公司业务需求，想做可视化的架构图、关系图、自动化的东西，寻找的各类图形化的插件，最初本想着用G6，由于G6整段代码复制下来也用不了，改了出不来而且时间紧迫就放弃了。

GoJs对于新手很友好，简单的架构关系图很容易上手

构建基本图形

<body>
  <div id='myDiagramDiv' style="border: solid 1px blue; width:400px; height:400px"></div>
</body>
// 引入go.js文件
<script src="./go.js"></script>
<script>
	// myDiagramDiv为dom节点id
	// 创建图
	let myDiagram = new go.Diagram('myDiagramDiv')
	// 创建节点 节点中元素的排序方式是 Panel.Auto
	let node = new go.Node(go.Panel.Auto)
	// 创建图形
	let shape = new go.Shape()
	// 定义图形属性
	// 形状
	shape.figure = 'RoundedRectangle'
	// 填充颜色
	shape.fill = 'lightblue'
	// 将图形加到节点
	node.add(shape)
	// 创建一个文本
	let textblock = new go.TextBlock()
	// 定义文本属性
	textblock.text = 'Hello'
	textblock.margin = 5
	// 文本添加到节点
	node.add(textblock)
	// 将节点加到图
	myDiagram.add(node)
</script>

会出现一个画布加上一个节点
在这里插入图片描述

去除水印

会发现画布是带水印的，接下来就讲如何去水印，如果使用的node包打开gojs里面的release文件夹，使用的那种语言改哪种。如果是引用的js文件，引用了哪个改哪个在这里插入图片描述
打开对应文件全局搜索"7eba17a4ca3b1a8346"

// 一般样式就是 a.xx =  ............. ;
// 注意这里 a.Ir 中的 Ir可能是其他内容，可能是pr，hr等等
a.Ir=b.Y[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.Y,Ik,4,4);

把这一段删掉或者注释掉，然后同位置替换上如下代码

a.Ir=function(){return true;};

保存文件，重启项目

通过 GraphObject.make 构建图形

	let myDiagram = new go.Diagram('myDiagramDiv')
	let $ = go.GraphObject.make

	let nodeDataArray = [
		{ key: "iscroll容器-1", name: "iscroll容器-1", compId: "111", color: "pink", cursor: "grab", loc: "0 0" },
		{ key: "iscroll容器-2", name: "iscroll容器-2", compId: "222", color: "skyblue", cursor: "grab", loc: "0 -100" }
	]

	let relation = [
		{ from: "111", fromNodeType: "component", to: "222", toNodeType: "event" }
	];
	myDiagram.nodeTemplate = $(go.Node, 'Auto', 
	// 'Auto'：与css设置width:auto同样效果
		{
			// 添加点击事件
			click: function (e, obj) { }
		},
		// 将节点数据nodeDataArray .loc与图标位置建立联系
		new go.Binding('position', 'loc', go.Point.parse),
		// 设置节点形状：带圆角长方形
		$(go.Shape, 'RoundedRectangle',
			// 设置大小，边框大小、颜色，背景色，鼠标手势
			{
				desiredSize: new go.Size(160, NaN),
				strokeWidth: 0,
				fill: '#ffffff',
				cursor: 'grab'
			},
			// 将节点数据nodeDataArray .color与节点背景色建立链接
			new go.Binding('fill', 'color'),
			// 将节点数据nodeDataArray .cursor与节点鼠标手势建立联系
			new go.Binding('cursor', 'cursor')
		),
		// 设置文本节点
		$(go.TextBlock,
			// 设置文本样式：大小，是否换行，margin
			{
				desiredSize: new go.Size(100, NaN),
				wrap: go.TextBlock.WrapFit,
				margin: 8
			},
			// 设置文本对应字段
			new go.Binding('text', 'name'),
			new go.Binding('cursor', 'cursor')
		)
	)
	myDiagram.linkTemplate = $(go.Link,
		$(go.Shape, // the link shape
			{ strokeWidth: 2, stroke: 'white' }),
		$(go.Shape, // the arrowhead
			{
				toArrow: 'OpenTriangle',
				fill: null,
				stroke: 'white'
			})
	);

	// 将图表在画布中居中显示
	myDiagram.initialContentAlignment = go.Spot.Center;
	// 操作支持ctrl+z、ctrl+Y 实现undo和redo
	myDiagram.undoManager.isEnabled = true;

	//nodeDataArray:graph, linkDataArray: relation
	myDiagram.model = new go.GraphLinksModel(nodeDataArray, relation);

在这里插入图片描述

属性

通用属性

属性		值
Stroke	边框颜色	null为无边框
margin	边框间距	new go.Margin(0, 0, 0, 8) // 括号里面表示上，右，下，左
visible	设置元素是否可见	true为可见，false为不可见
textAlign	文本位置	"center"居中
editable	文本是否可编辑	true，false
font	字体	“bold 8pt Microsoft YaHei, Arial, sans-serif”
fill	背景颜色
alignment	元素位置设置	左下：go.Spot.BottomLeft 右下：go.Spot.BottomRight 左上：go.Spot.TopLeft 右上：go.Spot.TopRight
isMultiline	编辑时是否允许换行	默认true
maxLines	设置文本显示的最大行数
minSize	最小大小	new go.Size(10, 16)，控制了最大大小后，文本就会自动换行了
maxSize	最大大小

画布属性

属性		值
initialContentAlignment	画布初始位置	go.Spot.Center
initialPosition	初始坐标	New go.Point(0, 0)
allowDrop	拖拽	Boolean
allowMove	移动节点	Boolean
allowDelete	删除	Boolean
allowCopy	复制	Boolean
allowClipboard	剪切	Boolean
allowSelect	选中	Boolean
allowZoom	缩放	Boolean
allowInser	插入	Boolean
“undoManager.isEnabled”	撤销和重做	Boolean
allowHorizontalScroll	水平滚动条	Boolean
allowVerticalScroll	垂直滚动条	Boolean
isReadOnly	只读	true
“animationManager.duration”	画布初始化动画事件	Number
“animationManager.isEnabled”	画布初始化动画	Boolean
autoScale	画布比例自适应	自适应当前画布：go.Diagram.Uniform 自适应合适大小：go.Diagram.UniformToFill 默认值不自适应：go.Diagram.None
ismodelfied	禁止拖拽	true
allowRelink	重现连接现有链接	true
allowLink	绘制新链接	true
allowTextEdit	文本编辑	Boolean

	// 缩小
	myDiagram.commandHandler.decreaseZoom()
	// 放大
	myDiagram.commandHandler.increaseZoom()

yeeyangx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GoJs探索之路

由于公司业务需求，想做可视化的架构图、关系图、自动化的东西，寻找的各类图形化的插件，最初本想着用G6，由于G6整段代码复制下来也用不了，改了出不来而且时间紧迫就放弃了。GoJs对于新手很友好，简单的架构关系图很容易上手构建基本图形<body> <div id='myDiagramDiv' style="border: solid 1px blue; width:400px; height:400px"></div></body>// 引入go.j
复制链接

扫一扫