go.js
<h3 id="gojs插件">gojs插件</h3><p>是一个前端插件，可以通过代码动态的生成流程图，各自展示图</p>
<p>参考网址:https://gojs.net/latest/index.html</p>
<p>如果你想使用，需要先下载对应的文件</p>
<p>我们能用的到的其实就三个文件</p>
<pre><code class="language-python">"""
gojs.js 上线 需要导入的js文件
go-debug.js 开发会帮你打印错误日志
上面两个文件就类似于一个是压缩的一个是没有压缩的
Figures.js
gojs.js内部只带了基本的图形，如果想用更多高级的图像就要导入
"""
</code></pre>
<p><strong>基本使用</strong></p>
<p>先用div占据一块区域，之后在该区域内生成对应的图标及各种流程图</p>
<pre><code class="language-html"><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"); // 创建图表，用于在页面上画图
// 第二步：创建一个节点，内容为jason
var node = $(go.Node, $(go.TextBlock, {text: "jason"}));
// 第三步：将节点添加到图表中
myDiagram.add(node)
</script>
</code></pre>
<h4 id="重要概念">重要概念</h4>
<ul>
<li>TextBlock文本</li>
<li>Shape图形</li>
<li>Node图形与文本结合</li>
<li>Link箭头</li>
</ul>
<p><strong>TextBlock</strong></p>
<pre><code class="language-html"><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: 'yellow'}));
myDiagram.add(node3);
</script>
</code></pre>
<p><strong>Shape</strong></p>
<pre><code class="language-html"><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 node5 = $(go.Node,
$(go.Shape, {figure: "Club", width: 40, height: 40, fill: 'red'})
);
myDiagram.add(node5);
</script>
</code></pre>
<p><strong>Node</strong></p>
<pre><code class="language-html"><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>
</code></pre>
<p><strong>Link</strong></p>
<pre><code class="language-html"><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>
</code></pre>
<p><strong>数据绑定的方式</strong></p>
<pre><code class="language-html">#数据驱动界面
<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>
</code></pre>
<p><strong>如何去除自带的水印</strong></p>
<p>修改go.js/go-debug.js中的源码</p>
<p>1.查找一个字符串:7eba17a4ca3b1a8346，注释所在行</p>
<pre><code class="language-js">/*a.kr=b.V(b.V,Jk,4,4);*/
</code></pre>
<p>2.替换新的代码</p>
<pre><code class="language-js">a.kr=function(){return true};
</code></pre><br><br>
来源：https://www.cnblogs.com/zx125/p/12368884.html
頁:
[1]