gojs 插件
时间:2020-04-14
本文章向大家介绍gojs 插件,主要包括gojs 插件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
gojs 插件
是一个前端插件,跟 go 和 js 没有半毛钱关系
主要可以通过代码动态的生成和修改图表数据(组织架构图,执行流程图等等)
网址:https://gojs.net/latest/index.html
如果你想使用,需要下载他的文件
目前需要我们了解的文件其实只有三个,用得到的只有两个
"""
1.go.js
是使用gojs所必须要导入的js文件
2.go-debug.js
可以帮你打印一些bug日志 正常线上不会使用
3.Figures.js
go.js中自带了一些基本的图标,额外扩展的图标需要引入该文件
"""
# 总结你在使用的导入go.js和Figures.js就够了
基本使用
gojs 使用基本套路是先在页面上写一个 div 站地方,之后初始化该 div,再然后所有的图标渲染都在该 div 内进行!!!
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script>
var $ = go.GraphObject.make;
// 第一步:创建图表
var myDiagram = $(go.Diagram, "myDiagramDiv"); // 创建图表,用于在页面上画图
// 第二步:创建一个节点,内容为 santa
var node = $(go.Node, $(go.TextBlock, {text: "santa"}));
// 第三步:将节点添加到图表中
myDiagram.add(node)
</script>
重要概念介绍
- TextBlock 创建文本
- Shape 创建图形
- Node 节点(结合文本与图形)
- Links 箭头
TextBlock
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script>
var $ = go.GraphObject.make;
// 第一步:创建图表
var myDiagram = $(go.Diagram, "myDiagramDiv"); // 创建图表,用于在页面上画图
var node1 = $(go.Node, $(go.TextBlock, {text: "jason"}));
myDiagram.add(node1);
var node2 = $(go.Node, $(go.TextBlock, {text: "jason", stroke: 'red'}));
myDiagram.add(node2);
var node3 = $(go.Node, $(go.TextBlock, {text: "jason", background: 'lightblue'}));
myDiagram.add(node3);
</script>
Shape
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script src="Figures.js"></script>
<script>
var $ = go.GraphObject.make;
// 第一步:创建图表
var myDiagram = $(go.Diagram, "myDiagramDiv"); // 创建图表,用于在页面上画图
var node1 = $(go.Node,
$(go.Shape, {figure: "Ellipse", width: 40, height: 40})
);
myDiagram.add(node1);
var node2 = $(go.Node,
$(go.Shape, {figure: "RoundedRectangle", width: 40, height: 40, fill: 'green',stroke:'red'})
);
myDiagram.add(node2);
var node3 = $(go.Node,
$(go.Shape, {figure: "Rectangle", width: 40, height: 40, fill: null})
);
myDiagram.add(node3);
var node4 = $(go.Node,
$(go.Shape, {figure: "Club", width: 40, height: 40, fill: 'red'})
);
myDiagram.add(node4);
</script>
Node
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script src="Figures.js"></script>
<script>
var $ = go.GraphObject.make;
// 第一步:创建图表
var myDiagram = $(go.Diagram, "myDiagramDiv"); // 创建图表,用于在页面上画图
var node1 = $(go.Node,
"Vertical", // 垂直方向
{
background: 'yellow',
padding: 8
},
$(go.Shape, {figure: "Ellipse", width: 40, height: 40,fill:null}),
$(go.TextBlock, {text: "jason"})
);
myDiagram.add(node1);
var node2 = $(go.Node,
"Horizontal", // 水平方向
{
background: 'white',
padding: 5
},
$(go.Shape, {figure: "RoundedRectangle", width: 40, height: 40}),
$(go.TextBlock, {text: "jason"})
);
myDiagram.add(node2);
var node3 = $(go.Node,
"Auto", // 居中
$(go.Shape, {figure: "Ellipse", width: 80, height: 80, background: 'green', fill: 'red'}),
$(go.TextBlock, {text: "jason"})
);
myDiagram.add(node3);
</script>
links
<div id="myDiagramDiv" style="width:500px; min-height:450px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script>
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv",
{layout: $(go.TreeLayout, {angle: 0})}
); // 创建图表,用于在页面上画图
var startNode = $(go.Node, "Auto",
$(go.Shape, {figure: "Ellipse", width: 40, height: 40, fill: '#79C900', stroke: '#79C900'}),
$(go.TextBlock, {text: '开始', stroke: 'white'})
);
myDiagram.add(startNode);
var downloadNode = $(go.Node, "Auto",
$(go.Shape, {figure: "RoundedRectangle", height: 40, fill: 'red', stroke: '#79C900'}),
$(go.TextBlock, {text: '下载代码', stroke: 'white'})
);
myDiagram.add(downloadNode);
var startToDownloadLink = $(go.Link,
{fromNode: startNode, toNode: downloadNode},
$(go.Shape, {strokeWidth: 1}),
$(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1})
);
myDiagram.add(startToDownloadLink);
</script>
1.如何做到数据的前后端交互,图标的动态修改
2.如何去除 gojs 自带的水印
数据绑定式
<div id="diagramDiv" style="width:100%; min-height:450px; background-color: #DAE4E4;"></div>
<script src="go.js"></script>
<script>
var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "diagramDiv",{
layout: $(go.TreeLayout, {
angle: 0,
nodeSpacing: 20,
layerSpacing: 70
})
});
// 创建一个节点模版
diagram.nodeTemplate = $(go.Node, "Auto",
$(go.Shape, {
figure: "RoundedRectangle",
fill: 'yellow',
stroke: 'yellow'
}, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
$(go.TextBlock, {margin: 8}, new go.Binding("text", "text"))
);
// 创建一个箭头模版
diagram.linkTemplate = $(go.Link,
{routing: go.Link.Orthogonal},
$(go.Shape, {stroke: 'yellow'}, new go.Binding('stroke', 'link_color')),
$(go.Shape, {toArrow: "OpenTriangle", stroke: 'yellow'}, new go.Binding('stroke', 'link_color'))
);
// 这里的数据后期就可以通过后端来获取
var nodeDataArray = [
{key: "start", text: '开始', figure: 'Ellipse', color: "lightgreen"},
{key: "download", parent: 'start', text: '下载代码', color: "lightgreen", link_text: '执行中...'},
{key: "compile", parent: 'download', text: '本地编译', color: "lightgreen"},
{key: "zip", parent: 'compile', text: '打包', color: "red", link_color: 'red'},
{key: "c1", text: '服务器1', parent: "zip"},
{key: "c11", text: '服务重启', parent: "c1"},
{key: "c2", text: '服务器2', parent: "zip"},
{key: "c21", text: '服务重启', parent: "c2"},
{key: "c3", text: '服务器3', parent: "zip"},
{key: "c31", text: '服务重启', parent: "c3"}
];
diagram.model = new go.TreeModel(nodeDataArray);
// 动态控制节点颜色变化
var node = diagram.model.findNodeDataForKey("zip");
diagram.model.setDataProperty(node, "color", "lightgreen");
</script>
如何去除gojs自带的水印
需要修改go.js文件源码
-
需要找到一个特定的字符串注释该字符串所在的一行代码
# 7eba17a4ca3b1a8346 a.kr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Jk,4,4);
-
在后面添加一行新的代码
a.kr=function(){return false};
原文地址:https://www.cnblogs.com/kai-/p/12698218.html
- openfire中mysql的前期设置
- android中最先被执行的activity
- Spring Boot微服务架构入门
- 测序文章数据上传找哪里
- Volatile实现原理实现原子性happens-before关系从happends-before规则分析可见性编译器层面实现可见性处理器层面实现可见性
- java中的toString方法
- 简单可视化-送你一双发现美的眼睛
- 享元模式
- 揭秘:针对中国移动用户的强大网银木马剖析
- 从源代码到Runtime发生的重排序编译器重排序指令重排序内存系统重排序阻止重排序
- 内存屏障保证缓存一致性优化
- 最新XSS 0day漏洞来袭,影响最新版本IE浏览器(含POC)
- Java内存模型—JMMhappens-before规则
- 那些年我们一起用过的Hybrid App
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ubuntu 18.04上安装 phpMyAdmin的详细教程
- Android Popupwindow弹出窗口的简单使用方法
- 解决CentOS7虚拟机无法上网并设置CentOS7虚拟机使用静态IP上网
- Android编程实现自定义Dialog的大小自动控制方法示例
- Linux中如何查看文件的创建时间详解
- Android 图片添加水印的实现方法
- Linux系统清除缓存的方法总结
- 详解Android使用@hide的API的方法
- Android 实现按两次返回键退出程序(两种方法)
- 使用 bash 倒计时日期的方法
- Android 实现页面跳转
- Android EditText密码的隐藏和显示功能
- linux系统下的时间配置综述
- Android TextView 去掉自适应默认的fontpadding的实现方法
- Linux文件/目录的权限及归属管理使用