gojs基础

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28529373/article/details/81983661
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GOJS使用步骤</title>
		<script src="js/go.js"></script>
	</head>
	<body onload="init()">
		<!--1、创建一个html元素,作为我们的画布-->
		<div id="myDiagramDiv" style="width: 100%; height: 600px; border: 1px solid #000;"></div>
	</body>
</html>
<script>
	function init () {
		/* 2、使用gojs的api初始化画布 */
		var objGo = go.GraphObject.make;	//创建画布
		var myDiagram = objGo(go.Diagram, "myDiagramDiv",
		{
			//模型图的中心位置所在坐标
			initialContentAlignment: go.Spot.Center,
			
			//允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
			"undoManager.isEnabled": true,
			
			//不运行用户改变图表的规模
			allowZoom: false,
			
			//画布上面是否出现网格
			"grid.visible": true,
			
			//允许在画布上面双击时创建节点
			"clickCreatingTool.archetypeNodeData": {text: "Node"},
			
			//允许使用ctrl+c、ctrl+v复制粘贴
			"commandHandler.copiesTree": true,
			
			//允许使用delete键删除节点
			"commandHandler.deletesTree": true,
			
			//移动和复制拖动
			"draggingTool.dragsTree": true
		});
		
		/* 3、创建模型数据(Model)*/
		var myModel = objGo(go.GraphLinksModel);	//创建Model对象
		
		/* 4、创建节点 */
		myDiagram.nodeTemplate = 
			objGo(go.Node, "Horizontal", // 横向布局的面板
				{background: "#44CCFF"},// 节点淡蓝色背景
				objGo(go.Shape, "RoundedRectangle", // 定义形状,这是圆角矩形
					{
						//Shape的参数、宽高颜色等等
						figure: "Club",
						width: 40,
						height: 60,
						margin: 4,
						fill: 'red'
					},
					//绑定Shape.figure属性为Node.data.fig的值,Model对象可以通过Node.data.fig获取和设置Shape.figure(修改形状)
					new go.Binding("figure", "fig"),
					new go.Binding("fill", "fill2")
				),
				objGo(go.TextBlock, "Default Text", // 默认文本
					//设置字体大小颜色以及边框
					{margin: 12,stroke: "white",font: "bold 16px sans-serif"},
					//绑定TextBlock.text 属性为Node.data.name的值,Model对象可以通过Node.data.name获取和设置TextBlock.text
					new go.Binding("text", "name")
				)
			)
			
		//model中的数据每一个js对象都代表着一个相应的模型图中的元素
		myModel.nodeDataArray = [
			{ key: "aaa", name: "工厂", fig: 'YinYang', fill2: 'blue' },
            { key: "bbb", name: "车间", fig: 'Peace', fill2: 'red' },
            { key: "ccc", name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { key: "ddd", name: "岗位", fig: 'Grape', fill2: 'yellow' }
		];
		
		myModel.linkDataArray = [
			{from: "aaa", to: "bbb"},
			{from: "ccc", to: "bbb"},
			{from: "aaa", to: "ddd"},
		]
		myDiagram.model = myModel; //将模型数据绑定在画布图上
	}
</script>

 

展开阅读全文

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