前端之gojs外掛的基本使用
阿新 • • 發佈：2020-02-28
gojs是一個前端外掛，可以通過程式碼動態的生成流程圖，各自展示圖
參考網址:https://gojs.net/latest/index.html
如果你想使用，需要先下載對應的檔案
我們能用的到的其實就三個檔案
"""
gojs.js 需要匯入的js檔案
go-debug.js 會幫你列印錯誤日誌
上面兩個檔案就類似於一個是壓縮的一個是沒有壓縮的
Figures.js
gojs.js內部只帶了基本的圖形 如果你想用更多的如下則需要匯入該檔案
"""基本使用
先用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"); // 建立圖表，用於在頁面上畫圖 // 第二步：建立一個節點，內容為jason var node = $(go.Node, $(go.TextBlock, {text: "蔡徐坤"})); // 第三步：將節點新增到圖表中 myDiagram.add(node) </script>
重要概念
- TextBlock 文字
- Shape 圖形
- Node 圖形與文字結合
- Link 箭頭
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: "蔡徐坤"})); myDiagram.add(node1); var node2 = $(go.Node, $(go.TextBlock, {text: "蔡徐坤", stroke: 'red'})); myDiagram.add(node2); var node3 = $(go.Node, $(go.TextBlock, {text: "蔡徐坤", background: 'yellow'})); 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 node5 = $(go.Node,
$(go.Shape, {figure: "Club", width: 40, height: 40, fill: 'red'})
);
myDiagram.add(node5);
</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: "蔡徐坤"})
);
myDiagram.add(node1);
var node2 = $(go.Node,
"Horizontal", // 水平方向
{
background: 'white',
padding: 5
},
$(go.Shape, {figure: "RoundedRectangle", width: 40, height: 40}),
$(go.TextBlock, {text: "蔡徐坤"})
);
myDiagram.add(node2);
var node3 = $(go.Node,
"Auto", // 居中
$(go.Shape, {figure: "Ellipse", width: 80, height: 80, background: 'green', fill: 'red'}),
$(go.TextBlock, {text: "蔡徐坤"})
);
myDiagram.add(node3);
</script>Link
<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>上述程式碼只需要看懂即可，無需掌握
資料繫結的方式
<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>如何去除自帶的水印
修改go.js/go-debug.js中的原始碼
1.查詢一個字串:7eba17a4ca3b1a8346，註釋所在行
/*a.kr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Jk,4,4);*/2.新增新的程式碼
a.kr=function(){return true};