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 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
随机推荐
- Primecoin在windows上的部署和启动服务
Primecoin在windows上的部署和启动服务: 一.从官方获得Primecoin的windows版安装包: 二.一路像安装客户端一样的安装: 三.安装成功后它会自动弹出客户端运行,同步数据, ...
- log4j 日志配置
参考:https://blog.csdn.net/x6582026/article/details/52179817/ 1.引入jar包 log4j-1.2.17.jar log4j-core-2.1 ...
- 名称空间using namespace std
写再最前面:摘录于柳神的笔记 虽然C++是一门面向对象语言,但是对于刷算法这件事而言,我们并不需要掌握它⾯向对象的部分-只 需要掌握刷算法的时候需要用到的部分(基本输⼊输出.STL标准模板库. str ...
- c#能同时继承接口和类吗
c#能同时继承接口和类吗?( 要你命3000条12级分类:C#/.NET语言被浏览449次2013.09.10 满意答案 mroyal450 采纳率:54%12级 2013.09.11 C# 类, ...
- 修改vue中的挂载页面（index.html）的路径
修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501 版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...
- springboot之快速创建项目
1.选择创建新项目: 2.选择spring initializr,然后next 3.填写项目元数据,然后next 4.选择项目依赖,然后next 5.点击finish,完成项目创建
- iframe结构的网站按F5刷新子页面的实现方式
有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个iframe中,之后的请求改变iframe的内容.但是这样会有一个问题,因为浏览 ...
- px(像素)、pt(点)、ppi、dpi、dp、sp之间的关系
px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元 pt:point,点,印刷行业常用单位,等于1/72英寸 ppi:pixel per inch,每英寸像素数,该值越高,则屏幕越细腻 ...
- Day11 - L - 邂逅明下 HDU - 2897
当日遇到月,于是有了明.当我遇到了你,便成了侣.那天,日月相会,我见到了你.而且,大地失去了光辉,你我是否成侣?这注定是个凄美的故事.(以上是废话)小t和所有世俗的人们一样,期待那百年难遇的日食.驻足 ...
- 如何使用ffmpeg的c语言sdk实现对文件夹的操作
重要函数 打开文件夹:avio_open_dir() 读取文件夹:avio_read_dir() 关闭文件夹:avio_close_dir() 结构体, 操作目录的上下文:AVIODirContext ...