• gojs插件的介绍与使用


    gojs插件

    只要可以通过代码动态的生成和修改图标数据(组织架构图,执行流程图等)

    """
    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="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="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="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",  40, height: 40})
        );
         myDiagram.add(node1);
    
         var node2 = $(go.Node,
            $(go.Shape, {figure: "RoundedRectangle",  40, height: 40, fill: 'green',stroke:'red'})
        );
        myDiagram.add(node2);
    
        var node3 = $(go.Node,
            $(go.Shape, {figure: "Rectangle",  40, height: 40, fill: null})
        );
        myDiagram.add(node3);
    
        var node4 = $(go.Node,
            $(go.Shape, {figure: "Club",  40, height: 40, fill: 'red'})
        );
        myDiagram.add(node4);
    </script>
    

    Node

    <div id="myDiagramDiv" style="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",  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",  40, height: 40}),
            $(go.TextBlock, {text: "jason"})
        );
        myDiagram.add(node2);
    
        var node3 = $(go.Node,
            "Auto",  // 居中
            $(go.Shape, {figure: "Ellipse",  80, height: 80, background: 'green', fill: 'red'}),
            $(go.TextBlock, {text: "jason"})
        );
        myDiagram.add(node3);
    </script>
    
    <div id="myDiagramDiv" style="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",  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>
    

    如何去除gojs自带的水印?

    需要修改go.js文件源码

    • 需要找到一个特定的字符串注释该字符串所在的一行代码

      # 7eba17a4ca3b1a8346
      a.kr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Jk,4,4);
      
    • 在后面添加一行新的代码

      a.kr=function(){return false};
      

    如何做到数据的前后端交互,图标的动态修改?

    <div id="diagramDiv" style="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>
    
  • 相关阅读:
    P1036 选数(python)解题报告
    P1009 阶乘之和(python)解题报告
    P1002 过河卒(python) 解题报告
    来一波数据结构
    KMP算法
    链表实现约瑟夫
    闲谈Tampermonkey
    CF#574E. OpenStreetMap 题解
    洛谷 P2033 Chessboard Dance
    洛谷 P2056 采花
  • 原文地址:https://www.cnblogs.com/godlover/p/12701333.html
Copyright © 2020-2023  润新知