GoJS最简单的实例
复制如下内容保存到空白的.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 diagram = new go.Diagram("myDiagramDiv");
var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "lightblue";
node.add(shape);
var textblock = new go.TextBlock();
textblock.text = "Hello!";
textblock.margin = 5;
node.add(textblock);
diagram.add(node);
</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 diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, go.Panel.Auto,
$(go.Shape, {
figure: "RoundedRectangle",
fill: "lightblue"
}),
$(go.TextBlock, {
text: "Hello!",
margin: 5
})
));
</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 diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "Hello!", {
margin: 5
})
));
</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 diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: $(go.Brush, "Linear", {
0.0: "Violet",
1.0: "Lavender"
})
}),
$(go.TextBlock, "Hello!", {
margin: 5
})
));
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hwl</title>
</head <body>
<div id="myDiagramDiv" style="border:solid 1px blue; width:400px; height:150px"></div>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = new go.GraphLinksModel(
[{
key: "wo"
}, {
key: "ai"
}, {
key: "ni"
}], // 数组中有3个节点数据
[{
from: "wo",
to: "ai"
}, {
from: "ai",
to: "ni"
}] // 数组中有3个连接数据
);
</script>
</body>
</html>
复制如下内容保存到空白的.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");
var violetbrush = $(go.Brush, "Linear", {
0.0: "Violet",
1.0: "Lavender"
});
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: violetbrush
}),
$(go.TextBlock, "Hello!", {
margin: 5
})
));
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "Ellipse", {
fill: violetbrush
}),
$(go.TextBlock, "Goodbye!", {
margin: 5
})
));
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, {
text: "a TextBlock"
}),
$(go.TextBlock, {
text: "a TextBlock",
stroke: "red"
}),
$(go.TextBlock, {
text: "a TextBlock",
background: "lightblue"
}),
$(go.TextBlock, {
text: "a TextBlock",
font: "bold 14pt serif"
})
));
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, {
text: "a TextBlock",
background: "lightgreen",
margin: 2
}),
$(go.TextBlock, {
text: "a TextBlock",
background: "lightgreen",
margin: 2,
width: 100,
height: 33
}),
$(go.TextBlock, {
text: "a TextBlock",
background: "lightgreen",
margin: 2,
width: 60,
height: 33
}),
$(go.TextBlock, {
text: "a TextBlock",
background: "lightgreen",
margin: 2,
width: 50,
height: 22
}),
$(go.TextBlock, {
text: "a TextBlock",
background: "lightgreen",
margin: 2,
width: 40,
height: 9
})
));
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, {
text: "a Text Block",
background: "lightgreen",
margin: 2
}),
$(go.TextBlock, {
text: "a Text Block",
background: "lightgreen",
margin: 2,
width: 50,
wrap: go.TextBlock.None
}),
$(go.TextBlock, {
text: "a Text Block",
background: "lightgreen",
margin: 2,
width: 50,
wrap: go.TextBlock.WrapDesiredSize
}),
$(go.TextBlock, {
text: "a Text Block",
background: "lightgreen",
margin: 2,
width: 50,
wrap: go.TextBlock.WrapFit
})
));
</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.add(
$(go.Part, "Horizontal",
$(go.Shape, "Rectangle", {
width: 40,
height: 60,
margin: 4,
fill: null
}),
$(go.Shape, "RoundedRectangle", {
width: 40,
height: 60,
margin: 4,
fill: "red"
}),
$(go.Shape, "Ellipse", {
width: 40,
height: 60,
margin: 4,
fill: "green"
}),
$(go.Shape, "Triangle", {
width: 40,
height: 60,
margin: 4,
fill: "blue"
}),
$(go.Shape, "Diamond", {
width: 40,
height: 60,
margin: 4,
fill: "brown"
})
));
diagram.div.style.background = "lightgreen";
var W_geometry = go.Geometry.parse("M 0,0 L 10,50 20,10 30,50 40,0", false);
diagram.add(
$(go.Part, "Horizontal",
$(go.Shape, {
geometry: W_geometry,
strokeWidth: 2
}),
$(go.Shape, {
geometry: W_geometry,
stroke: "blue",
strokeWidth: 10,
strokeJoin: "miter",
strokeCap: "butt"
}),
$(go.Shape, {
geometry: W_geometry,
stroke: "green",
strokeWidth: 10,
strokeJoin: "bevel",
strokeCap: "round"
}),
$(go.Shape, {
geometry: W_geometry,
stroke: "red",
strokeWidth: 10,
strokeJoin: "round",
strokeCap: "square"
}),
$(go.Shape, {
geometry: W_geometry,
stroke: "purple",
strokeWidth: 2,
strokeDashArray: [6, 6, 2, 2]
})
));
//一个模板map的例子
var simpletemplate =
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
new go.Binding("fill", "color")),
$(go.TextBlock,
new go.Binding("text", "key")), {
toolTip: $(go.Adornment, "Auto",
$(go.Shape, {
fill: "#FFFFCC"
}),
$(go.TextBlock, {
margin: 4
},
new go.Binding("text", "desc"))
)
}
); // the "detailed" template shows all of the information in a Table Panel
var detailtemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.Panel, "Table", {
defaultAlignment: go.Spot.Left
},
$(go.TextBlock, {
row: 0,
column: 0,
columnSpan: 2,
font: "bold 12pt sans-serif"
},
new go.Binding("text", "key")),
$(go.TextBlock, {
row: 1,
column: 0
}, "Description:"),
$(go.TextBlock, {
row: 1,
column: 1
}, new go.Binding("text", "desc")),
$(go.TextBlock, {
row: 2,
column: 0
}, "Color:"),
$(go.TextBlock, {
row: 2,
column: 1
}, new go.Binding("text", "color"))
)
); // 创建了TemplateMap。里面含有三个键值对
var templmap = new go.Map("string", go.Node);
templmap.add("simple", simpletemplate);
templmap.add("detailed", detailtemplate);
templmap.add("", diagram.nodeTemplate); //重点。当创建map后，将map和画布进行绑定
diagram.nodeTemplateMap = templmap; diagram.model.nodeDataArray = [{
key: "Alpha",
desc: "first letter",
color: "green"
}, // uses default category: ""
{
key: "Beta",
desc: "second letter",
color: "lightblue",
category: "simple"
},
{
key: "Gamma",
desc: "third letter",
color: "pink",
category: "detailed"
},
{
key: "Delta",
desc: "fourth letter",
color: "cyan",
category: "detailed"
}
];
</script>
</body>
GoJS最简单的实例的更多相关文章
- ASP.NET MVC 4 插件化架构简单实现-实例篇
先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集. 4.定义模板引擎的搜索路径. 5.在模板引擎的查找页面方 ...
- Linux简单程序实例（GNU工具链，进程，线程，无名管道pipe，基于fd的文件操作，信号，scoket）
一, GNU工具链简介: (1)编译代码步骤: 预处理 -> 编译 -> 汇编 -> 链接: 预处理:去掉注释,进行宏替换,头文件包含等工作: gcc -E test.c -o te ...
- Redis：安装、配置、操作和简单代码实例(C语言Client端)
Redis:安装.配置.操作和简单代码实例(C语言Client端) - hj19870806的专栏 - 博客频道 - CSDN.NET Redis:安装.配置.操作和简单代码实例(C语言Client端 ...
- MVC 4 插件化架构简单实现实例篇
ASP.NET MVC 4 插件化架构简单实现-实例篇 先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...
- 分布式搜索ElasticSearch构建集群与简单搜索实例应用
分布式搜索ElasticSearch构建集群与简单搜索实例应用 关于ElasticSearch不介绍了,直接说应用. 分布式ElasticSearch集群构建的方法. 1.通过在程序中创建一个嵌入es ...
- 运用Unity实现依赖注入[结合简单三层实例]
运用Unity实现依赖注入[结合简单三层实例] 一:理论部分 依赖注入:这是 Ioc 模式的一种特殊情况,是一种基于改变对象的行为而不改变类的内部的接口编程技术.开发人员编写实现接口的类代码,并基于接 ...
- 原生Ajax用法——一个简单的实例
Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...
- C# 简单线程实例
1.简单线程实例 以及委托(同步委托.异步委托) using System; using System.Collections.Generic; using System.Linq; using Sy ...
- 《转》Robot Framework 的安装配置和简单的实例介绍
Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
随机推荐
- idea设置代码提示忽略大小写
- 【C++初学者自学笔记三】哑元函数、缺省参数、内联函数（模块二，PS：需要用到重载函数）
一,哑元函数:一个函数的参数只有类型没有名字的则这个参数称之为哑元.类似于void fun(int); 功能:1保持向前的兼容性,比方说我们需要做成一个成品,然后成品是会不断的更新第一代第二代,当我们 ...
- 登陆页面Sql注入（绕过）
如图,看到这道题的时候发觉之前做过一个类似的手工注入: 不过这次手注会失败,后台过滤了sql语句里的一些东西,但我们并不知道过滤了什么 到这里我就基本上没辙了,不过查询了资料以后发现sqlmap可以对 ...
- [转]Shell编程
原文链接 Shell编程其实真的很简单(一) 如今,不会Linux的程序员都不意思说自己是程序员,而不会shell编程就不能说自己会Linux.说起来似乎shell编程很屌啊,然而不用担心,其实she ...
- 吴裕雄--天生自然PythonDjangoWeb企业开发：解决使用相对路径名导入包中子模块问题
问题 将代码组织成包,想用import语句从另一个包名没有硬编码过的包中导入子模块. 解决方案
- 弹出USB大容量存储设备时出问题的解决方法
我的计算机->管理->系统工具->事件查看器->自定义视图->Kernel-Pnp->详情->进程ID 然后在任务管理器里找到该进程(任务管理器->查看 ...
- Python3---常见函数---range()用法
0X01函数说明: python range() 函数可创建一个整数列表,一般用在 for 循环中. 0X02函数语法: range(start,stop[,step]) start: 计数从 sta ...
- 笔记||Pyhthon3进阶之多线程操作共享数据
# 多线程操作共享数据--------------------------------------------------------------- # import threading# 使用锁# ...
- 用python发送qq邮件
一.需要开启smtp服务,获取授权密码. 在qq邮箱的设置里开启smtp 二.代码 # -*- coding:utf-8 -*- import smtplib from email.mime.text ...
- 常用的UI控件
关于本文:作为一名iOS软件工程师,熟练规范的使用常用的UI控件是必备的基础技能. 指示器(UIActivityIndicatorView)----转动的等待小菊花 提醒对话框(UIAlertView ...