GoJS实例3
复制如下内容保存到空白的.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://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 diagram = new go.Diagram("myDiagramDiv");
//节点模板描述如何构建每个节点
diagram.nodeTemplate =
$(go.Node, "Auto", //形状自动填充适合
$(go.Shape, "RoundedRectangle", // 使用圆角长方形
// 将Shape.fill绑定到Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock, {
margin: 3 //文字的间距
},
// 将TextBlock.text绑定到Node.data.key
new go.Binding("text", "key"))
);
// 模型仅包含描述图表的基本信息
diagram.model = new go.GraphLinksModel( //两个JavaScript对象数组
[
// 添加“颜色”属性
{
key: "Alpha",
color: "lightblue"
},
{
key: "Beta",
color: "orange"
},
{
key: "Gamma",
color: "lightgreen"
},
{
key: "Delta",
color: "pink"
}
],
[ // 数组中的连接数据
{
from: "Alpha",
to: "Beta"
},
{
from: "Alpha",
to: "Gamma"
},
{
from: "Beta",
to: "Beta"
},
{
from: "Gamma",
to: "Delta"
},
{
from: "Delta",
to: "Alpha"
}
]);
diagram.initialContentAlignment = go.Spot.Center;
// 启用Ctrl-Z撤消和Ctrl-Y重做
diagram.undoManager.isEnabled = true;
</script>
</body> </html>
GoJS实例3的更多相关文章
- GoJS实例1
复制如下内容保存到空白的.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 ...
随机推荐
- Python图文识别技术【入门必学】
Python图文识别技术分享 使用 tesseract-ORC 识别文字,识别率不算太高,需要自我训练 tessdata 数据,才能更精确的识别你想要让电脑认识出来的文字!ps:另外很多人在学习Pyt ...
- kafka2x-Elasticsearch 数据同步工具demo
Bboss is a good elasticsearch Java rest client. It operates and accesses elasticsearch in a way simi ...
- centos彻底卸载mysql（不保留数据）
1. rpm -qa | grep -i mysql 查找已经安装的mysql. MySQL-server-5.6.43-1.el6.x86_64 MySQL-client-5.6.43-1.el6. ...
- 了解js闭包
定义:闭包是由函数以及创建该函数的环境组合而成.这个环境包含了这个闭包创建时所能访问的所有局部变量 理解:能够读取其他函数的内部变量的函数,并开辟新的作用域(环境) 例子1 function pare ...
- 【转】IntelliJ IDEA 仿照vs2017快捷键设置，以及字体颜色设置
因后期工作需要使用java技术栈,所以近期抽空下载了intelliJ IDEA工具,但是作为一个Net开发者,在使用了vs以后,感觉在使用别的开发工具感觉就是没法和vs相比,毕竟vs被称为宇宙最强id ...
- 一个Android音频文本同步的英文有声读物App的开发过程
转发: http://segmentfault.com/a/1190000003498111 “新概念英语”.“可可英语”.“亚马逊的audible有声书”.“扇贝听力”是我目前所知道的实现英文语音和 ...
- JSON转换的实现
String转成JSON这个依赖很重要,我们将围绕fastjson中的JSONObject这个类来谈转换 <dependency> <groupId>com.alibaba&l ...
- treap（堆树）
# 2018-09-27 17:35:58 我实现的这个treap不能算是堆.有问题 最近对堆这种结构有点感兴趣,然后想用指针的方式实现一个堆而不是利用数组这种结构,于是自己想到了一个用二叉树结构实现 ...
- C++11 — lambda表达式（匿名函数）
C++11中lambda表达式的基本语法格式为: [capture](parameters) -> return_type { /* ... */ } 其中 [] 内为外部变量的传递方式: [] ...
- WAV格式解析
WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源,被W ...