<!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>