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 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
随机推荐
- 设计模式课程 设计模式精讲 6-2 抽象工厂coding
1 代码讲解 1.1 抽象工厂优点 1.2 抽象工厂缺点 1.3 为何有产品族的业务场景宜用抽象工厂设计模式?而不是工厂设计模式? 2 代码演练 2.1 抽象工厂代码演练 1 代码讲解 1.1 抽象工 ...
- js面试必考：this
this是前端面试中必考的基础知识点,也是新手小白在做项目中经常晕头转向的问题.但其实this不难理解. 判断this指向时,记住以下几点: 判断函数类型, 1.1 如果是箭头函数,则为第一个包裹箭头 ...
- 解决安装PyMySQL一直停在Building wheels for collected package：cryptography, cffi, pycparser的问题
我的运行环境为: 硬件:树莓派3b 系统:ubuntu_meta_16.04.2 因为项目需要,我在树莓派上搭建了基于python编程的Django的web框架,需要从MySQL中读取树莓派以及传感器 ...
- 关联容器：unordered_map详细介绍
版权声明:博主辛辛苦苦码的字哦~转载注明一下啦~ https://blog.csdn.net/hk2291976/article/details/51037095 介绍 1 特性 2 Hashtabl ...
- Educational Codeforces Round 72 (Rated for Div. 2)D（DFS，思维）
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int n,m,k=1;int c[5007] ...
- [HEOI 2013]SAO
Description 题库连接 给你一个 \(n\) 个节点的有向树,问你这棵树的拓扑序个数,对大质数取模.多测,测试组数 \(T\). \(1\leq n\leq 1000, 1\leq T\le ...
- ls命令与cd命令
ls命令用于显示文件目录列表,当使用ls命令时,默认显示的只有非隐藏文件或文件夹(隐藏文件在linux中前面有 ' . ' ),当不加参数时,显示当前目录. 1.ls命令语法 ls [参数][目标文件 ...
- 谷歌下，因为给外层大容器设置 overflow:visible; 而导致问题，IE、火狐正常
#selector { height: auto !important; width: 1024px!important; margin: auto; overflow:visible !import ...
- 设计模式课程 设计模式精讲 8-3 单例设计模式-DoubleCheck双重检查实战及原理解析
1 课程讲解 1.1 为何要使用双重检查 1.2 双重检查的缺点 1.3 指令重排序讲解 1.4 指令重排序比喻(自己理解) 1.5 如何解决指令重排序问题 2 代码演练 2.1 代码演练1(双重检查 ...
- Wepy框架和mpVue框架的比较及使用mpVue框架需要注意的点
Wepy框架 它是一款类Vue框架,在代码风格上借鉴了Vue,本身和Vue没有任何关系. mpVue框架 它是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发 ...