gojs使用

目錄

• gojs插件下載下傳
• 基本使用
• 重要概念介紹
  • TextBlock 建立文本
  • Shape 建立圖型
  • Node 建立節點
  • links 建立箭頭
• 前後端資料綁定方式，實作圖示動态修改
• 如何去除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"); // 建立圖表，用于在頁面上畫圖
  // 第二步：建立一個節點，内容為jason
  var node = $(go.Node, $(go.TextBlock, {text: "jason"}));
  // 第三步：将節點添加到圖表中
  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>
           

前後端資料綁定方式，實作圖示動态修改

<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};