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 ...
随机推荐
- 读书笔记 - The Hitchhiker's Guide to Python
网址 http://docs.python-guide.org/en/latest/ Reuqests库的作者写的经验 1. 项目需要一个好的结构 https://www.kennethreitz.o ...
- [转]Java监听器的原理与实现
原文链接 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程序,这个程序专门用 ...
- A股上市公司财报披露时间
一.上市公司年报披露时间:每年1月1日——4月30日. 二.上市公司中年报披露时间:每年7月1日——8月30日. 三.上市公司季报披露时间: 1季报:每年4月1日——4月30日. 2季报(中报):每年 ...
- Educational Codeforces Round 72 (Rated for Div. 2)E（线段树，思维）
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;#define BUF_SIZE 100000 ...
- Atcoder Beginner Contest 139E（模拟，思维）
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int n;int a[1007][1007] ...
- js运算符的特殊应用
是否包含指定字符: ~ 取整: | 取半: >> 成长值评级: || 判断奇偶: & 交换两个数字的值: ^= 2的n次方: << 和 ** 1 << n- ...
- 58按之字形顺序打印二叉树 +队列访问使用front和back，栈才是top
题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 思路:最暴力的方法就是使用队列进行层次遍 ...
- 图片切换.----so屌
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在Windows中实现Java调用DLL（转载）
本文提供调用本地 C 代码的 Java 代码示例,包括传递和返回某些常用的数据类型.本地方法包含在特定于平台的可执行文件中.就本文中的示例而言,本地方法包含在 Windows 32 位动态链接库 (D ...
- SCP 上传
https://www.runoob.com/linux/linux-comm-scp.html scp 当前路径(绝对路径) root@xx.xx.xx :/xx/xx/xx/