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>

思考:

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/lishuangjian/p/12702366.html

时间: 2024-10-09 11:24:47

gojs插件干货:重要概念介绍,数据绑定式,以及怎样去除自带水印方法的相关文章

Eclipse插件终极攻略(一):基本概念介绍

在这个系列的第一部分里,将对Eclipse和插件的概要.插件开发的基本概念.OSGi和SWT进行简单介绍. 1.Eclipse的架构 Eclipse被作为java的IDE(集成开发环境)被广泛的应用,但是从本质上看Eclipse是一个整合了各种开发工具的平台.因此,它采用了可以自由的增加各种功能的插件架构技术.Eclipse平台的基本架构如图1-1所示. 图1-1 Eclipse的架构 在这里,在最底层位置的是作为Eclipse插件架构基干的OSGi运行时.虽然在早期的Eclipse版本中已经

mysql数据引擎的概念介绍

什么是数据库引擎?每种数据库的数据格式,内部实现机制都是不同的,要利用一种开发工具访问一种数据库,就必须通过一种中介程序,这种开发工具与数据库之间的中介程序就叫数据库引擎. 如果你是个赛车手并且按一下按钮就能够立即更换引擎而不需要把车开到车库里去换,那会是怎么感觉呢?MySQL数据库为开发人员所做的就好像是按按钮换引擎:它让你选择数据库引擎,并给你一条简单的途径来切换它. MySQL 的自带引擎肯定是够用了,但是在有些情况下,其他的引擎可能要比手头所用更适合完成任务.如果愿意的话,你甚至可以使用

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中自带了一些基本

代码发布项目(二)——django实现websocket(使用channels)、基于channels实现群聊功能、gojs插件、paramiko模块

一.django实现websocket django默认是不支持websocket,只支持http协议 在django中如果想要基于websocket开发项目 你需要安装模块:channles pip3 install channels==2.3 版本不要使用最新的,如果安装最新的可能会自动把你的django版本升级到最新版 对应的解释器环境建议使用3.6(官网的说法:3.5可能有问题,3.7可能也有问题...具体原因没有给解释) channels模块内部已经帮我们封装好了 握手/加密/解密 面

前端之gojs插件的基本使用

gojs是一个前端插件,可以通过代码动态的生成流程图,各自展示图 参考网址:https://gojs.net/latest/index.html 如果你想使用,需要先下载对应的文件 我们能用的到的其实就三个文件 """ gojs.js 需要导入的js文件 go-debug.js 会帮你打印错误日志 上面两个文件就类似于一个是压缩的一个是没有压缩的 Figures.js gojs.js内部只带了基本的图形 如果你想用更多的如下则需要导入该文件 """

输入子系统概念介绍

输入子系统在内核中的位置:/driver/input drivers/input/input.c: input_init ---> err = register_chrdev(INPUT_MAJOR, "input", &input_fops); static const struct file_operations input_fops = { .owner = THIS_MODULE, .open = input_open_file, }; 问:怎么读按键? inpu

Shiro权限控制框架入门1:Shiro的认证流程以及基本概念介绍

前言:我在最开始学习Shiro这个框架时,在网上搜索到的一个介绍比较全面的教程是:<跟我学Shiro>系列教程.但是在我看了他写的前几篇文章后,我发现虽然他在这个系列教程中把shiro的一些特性介绍地非常全面详细,但是整个教程的叙述方式还是有很大缺陷的.文章与文章之间并没有很好地串联起来,每篇文章介绍的东西都过于分散了,如果是对shiro完全不了解的新手来看的话完全是一场噩梦.就像一个网友评价的这样: 看了看这个教程,看完之后都想放弃shiro了,完全看不懂,后来百度了很多别的资料才理解了sh

足彩基础知识入门(4)赛事数据库与预测平台基础概念介绍(一)

在足球赛事数据库以及统计分析预测平台中,有很多概念,如果不搞懂,很难进行下一步的工作.所以为了配合团队人员的学习和任务进行,特意编写这篇文章.如果有其他问题和不懂的,请留言,将根据情况进行更新. 本文原文地址:足彩基础知识入门(4)赛事数据库与预测平台基础概念介绍(一) 1.指数1/2/3.... 我在 足彩基础知识入门(3)足彩赔率的本质 一文中介绍了赔率的概念,那么指数的概念和赔率以及结果是相关的.我们举个例子: 如上图的比赛,前面是竞彩非让球的赔率:1.74-3.25-4.15,也就是说

DNS系列- 1.dns基本概念介绍

DNS系列- 1.dns基本概念介绍     目录         前言         一.概述             1.名词解释             2.DNS域名结构         二.DNS域名解析             1.查询类型             2.解析类型             3.DNS服务器的类型             4.区域传输             5.解析过程             6.解析答案         三.资源记录