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 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
随机推荐
- Go文档：go命令
目录 go go bug--启动bug报告 go build--编译包及其依赖包 go clean--删除对象文件和缓存文件 go doc--查看包或符号的文档 go env--打印环境变量 go f ...
- Redis的人门以及使用
1.Redis的安装 1.1centos下安装Redis 1.1.1 安装gcc 1.1.2 安装过程 图一 图三 2.Redis的启动 2.1 前端模式启动(不推荐) 截图 2.2 后端模式(推荐 ...
- ipmitool命令
1.remote access control powerIpmitool -I lanplus -H 192.168.0.10 -U username -P Password chassis pow ...
- shell脚本添加脚本执行时间和当前运行次数current running time
#!/bin/bash ############################ #Author:Bing #Create time:3/31/2017 ####################### ...
- django annotate()的使用
https://www.zmrenwu.com/post/18/ 博客文章通常都有分类,有时候我们会看到分类名后面还跟着该分类下的文章数量.前面我们通过学习 django 博客开发入门教程搭建了一个小 ...
- 【转】python中的闭包详细解析
一.什么是闭包? 如果一个内嵌函数访问外部嵌套函数作用域的变量,并返回这个函数,则这个函数就是闭包 闭包必须满足三个条件: 1. 必须有一个内嵌函数 2. 内嵌函数必须引用外部嵌套函数中的变量 ...
- 第1节 Scala基础语法：scala中的方法源码分析
val list=List(1,2,3,4) list.reduce((x:Int,y:Int)=>x+y)--->list.reduceLeft((x:Int,y:Int)=>x+ ...
- Mybatis 条件判断单双引号解析问题
最近使用 Mybatis 遇到了一个奇怪的问题,前端传了一个数字字符串(type = "1") ,我做了如下判断: <if test=" type == '1' & ...
- Java生鲜电商平台-小程序或者APP拼团功能设计与架构实战
Java生鲜电商平台-小程序或者APP拼团功能设计与架构实战 说明:Java生鲜电商平台拼团是拉新引流的利器,将拼团运用到极致的就是拼多多,前期通过选取性价比高.实用性强的商品进行拼团,在社交圈(主要 ...
- 【IMU_Ops】------III------ IMU自动化运维平台之CMDB（admin）
说明本文中所有内容仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. #A 首先启用admin 通过python manage.p ...