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 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
随机推荐
- 关于定时执行任务：Crontab的20个例子
关于定时执行任务:Crontab的20个例子 LeeLom 关注 2016.09.28 19:53* 字数 713 阅读 9186评论 6喜欢 15 简介 Linux crontab和Windows ...
- 【协作式原创】查漏补缺之乐观锁与悲观锁TODO
面试官:你了解乐观锁和悲观锁吗? 乐观锁和悲观锁是两种思想,用于解决并发场景下的数据竞争问题. 悲观锁的实现方式是加锁,加锁既可以是对代码块加锁(如Java的synchronized关键字),也可以是 ...
- Matlab的简单数据保存读取
1.使用load进行文件读取 例如读入文件名为'filename.txt'中的数据,那么可以使用以下代码: load('filename.txt') 注意:filename.txt中的数据应符合矩阵形 ...
- ProgressBarForm 进度条
ProgressBarForm public partial class ProgressBarForm : Form { private Panel panel1 = new System.Wind ...
- WebView 设置请求头 Header
package com.webview.demo; 2 3 import android.os.Bundle; 4 import android.support.v7.app.AppCompatAct ...
- Keepalived+Nginx解决方案实现高可用的API网关（nginx）
一. 采用Keepalived+Nginx解决方案实现高可用的API网关. 2.1 Nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP ...
- C++的注册和回调
注册回调的作用 在设计模式中注册回调的方式叫做回调模式.在SDK开发中,为增强开发者的SDK通用性,排序或者一些算法逻辑需要使用者进行编写.这时候就需要向SDK传递回调函数.注册回调能使下层主动与上层 ...
- 本周总结（19年暑假）—— Part2
日期:2019.7.21 博客期:108 星期日 这几天正在认真学习大数据,我是在B站上看尚老师的视频搞得.我已经配好了Hadoop的基本环境,现在学习的是HDFS的相关内容
- Laradock 如何通过 ssh 方式连接到 workspace
用 docker-compose exec workspace bash 方式可以进入容器,但是还是在 xshell 终端连接比较方便. 在网上也没找到方法,其实可以通过密钥的方式连接.记录一下仅 ...
- ROS学习笔记6-理解主题
本文来源于:http://wiki.ros.org/ROS/Tutorials/UnderstandingTopics ROS主题假设turtlesim节点已经运行,打开一个新终端,使用如下命令运行键 ...