GoJS实例1
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做
});
var myModel = $(go.Model);
// 在模型数据中，每个节点都由一个JavaScript对象表示：
myModel.nodeDataArray = [{
key: "Alpha"
},
{
key: "Beta"
},
{
key: "Gamma"
}
];
myDiagram.model = myModel;
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做
});
var myModel = $(go.Model);
// 在模型数据中，每个节点都由一个JavaScript对象表示：
var nodeDataArray = [{
key: "Alpha"
},
{
key: "Beta"
},
{
key: "Gamma"
}
];
var linkDataArray = [{
from: "Alpha",
to: "Beta"
},
{
from: "Alpha",
to: "Gamma"
}
];
myModel = new go.GraphLinksModel(nodeDataArray, nodeLinkDataArray);
myDiagram.model = myModel;
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
new go.Binding("fill", "color")), // shape.fill = data.color
$(go.TextBlock, {
margin: 20
},
new go.Binding("text", "key")) // textblock.text = data.key
); diagram.linkTemplate =
$(go.Link,
$(go.Shape,
new go.Binding("stroke", "color"), // shape.stroke = data.color
new go.Binding("strokeWidth", "thick")), // shape.strokeWidth = data.thick
$(go.Shape, {
toArrow: "OpenTriangle",
fill: null
},
new go.Binding("stroke", "color"), // shape.stroke = data.color
new go.Binding("strokeWidth", "thick")) // shape.strokeWidth = data.thick
); var nodeDataArray = [{
key: "Alpha",
color: "lightblue"
},
{
key: "Beta",
color: "pink"
}
];
var linkDataArray = [{
from: "Alpha",
to: "Beta",
color: "blue",
thick: 2
}];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc"), // 从data.loc值获取Node.location
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
new go.Binding("fill", "color")),
$(go.TextBlock, {
margin: 10
},
new go.Binding("text", "key"))
); var nodeDataArray = [
// 为每个节点使用Point值指定位置
{
key: "Alpha",
color: "lightblue",
loc: new go.Point(0, 0)
},
{
key: "Beta",
color: "pink",
loc: new go.Point(100, 50)
}
];
var linkDataArray = [{
from: "Alpha",
to: "Beta"
}];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse), // convert string into a Point value
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
new go.Binding("fill", "color")),
$(go.TextBlock, {
margin: 5
},
new go.Binding("text", "key"))
); var nodeDataArray = [{
key: "Alpha",
color: "lightblue",
loc: "0 0"
}, // note string values for location
{
key: "Beta",
color: "pink",
loc: "100 50"
}
];
var linkDataArray = [{
from: "Alpha",
to: "Beta"
}];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle", { // 如果data.highlight未定义，则为默认值:
fill: "yellow",
stroke: "orange",
strokeWidth: 2
},
new go.Binding("fill", "highlight", function (v) {
return v ? "pink" : "lightblue";
}),
new go.Binding("stroke", "highlight", function (v) {
return v ? "red" : "blue";
}),
new go.Binding("strokeWidth", "highlight", function (v) {
return v ? 3 : 1;
})),
$(go.TextBlock, {
margin: 10
},
new go.Binding("text", "key"))
); var nodeDataArray = [{
key: "Alpha",
loc: "0 0",
highlight: false
},
{
key: "Beta",
loc: "100 50",
highlight: true
},
{
key: "Gamma",
loc: "0 100"
} // 高亮属性未定义：使用默认值
];
var linkDataArray = [{
from: "Alpha",
to: "Beta"
}];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
//为了简洁
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto", {
locationSpot: go.Spot.Center
},
$(go.Shape, "RoundedRectangle", { // default values if the data.highlight is undefined:
fill: "yellow",
stroke: "orange",
strokeWidth: 2
},
new go.Binding("fill", "highlight", function (v) {
return v ? "pink" : "lightblue";
}),
new go.Binding("stroke", "highlight", function (v) {
return v ? "red" : "blue";
}),
new go.Binding("strokeWidth", "highlight", function (v) {
return v ? 3 : 1;
})),
$(go.TextBlock, {
margin: 5
},
new go.Binding("text", "key"))
);
diagram.model.nodeDataArray = [{
key: "Alpha",
highlight: false
} // just one node, and no links
]; function flash() {
var model = diagram.model;
// all model changes should happen in a transaction
model.startTransaction("flash");
var data = model.nodeDataArray[0]; // get the first node data
model.setDataProperty(data, "highlight", !data.highlight);
model.commitTransaction("flash");
} function loop() {
//每0.5s相互转换颜色
setTimeout(function () {
flash();
loop();
}, 500);
}
loop();
</script>
</body> </html>
GoJS实例1的更多相关文章
- GoJS实例3
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS实例4
此示例更改链接数据的“to”属性,使链接连接到不同的节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> &l ...
- GoJS实例2
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta name=&quo ...
- GoJS最简单的实例
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS 友情链接
目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...
- GoJS简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- JS组件系列——Gojs组件，前端图形化插件之利器
前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...
- JS图形化插件利器组件系列 —— Gojs组件
阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...
随机推荐
- 设计模式01 创建型模式 - 建造者模式(Build Pattern)
参考 1. Builder Design Pattern | Youtube 2. 建造者模式(Builder和Director)| 博客园 3. 深入理解Builder模式 | 简书 建造者模式(B ...
- druid监控sql完整版
利用Druid实现应用和SQL监控 一.关于Druid Druid是一个JDBC组件,它包括三部分: DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系. D ...
- MFC加载图片
目录 1. 自适应方法 2. 加载原图方法 1. 自适应方法 /* 自适应方法 */ CRect rect; CRect rect1; CImage image; //创建图片类 image.Load ...
- Netsparker介绍
Netsparker是一款综合型的web应用安全漏洞扫描工具,它分为专业版和免费版,免费版的功能也比较强大.Netsparker与其他综合性的web应用安全扫描工具相比的一个特点是它能够更好的检测SQ ...
- 【剑指Offer面试编程题】题目1361：翻转单词顺序--九度OJ
题目描述: JOBDU最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,&quo ...
- FTP虚拟账户
部署一个内网FTP服务器 为了解决公司员工文件存储和下载的需求.要求部署内部FTP服务器,员工可以通过自己的账号的权限对FTP进行操作. 1)公司公共文件可以通过匿名下载 2)公司财务部.商务部.行政 ...
- Java中四种遍历Map对象的方法
方法一:在for-each循环中使用entry来遍历,通过Map.entrySet遍历key和value,这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用. Map<Int ...
- 第1节 Scala基础语法：14、15、list集合练习
package cn.itcast.collect /** *作业题 */object ListTest { def main(args: Array[String]): Unit = { //创建一 ...
- Atcoder Grand Contest 037C（贪心，优先队列，思维）
#define HAVE_STRUCT_TIMESPEC//编译器中time.h和phread.h头文件中timespec结构体重名,故加此行#include<bits/stdc++.h> ...
- Eth合约攻击续
合同代表一个非常简单的游戏:谁给它发送了比当前奖金还大的数量的以太,就成为新的国王.在这样的事件中,被推翻的国王获得了新的奖金,但是如果你提交的话那么合约就会回退,让level重新成为国王,而我们的目 ...