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/yafeng666/p/12700288.html

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

gojs插件的相关文章

代码发布项目(二)——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插件 是一个前端插件,跟go和js没有半毛钱关系 主要可以通过代码动态的生成和修改图表数据(组织架构图,执行流程图等等) 网址:https://gojs.net/latest/index.html 如果你想使用,需要下载他的文件 目前需要我们了解的文件其实只有三个,用得到的只有两个 """ 1.go.js 是使用gojs所必须要导入的js文件 2.go-debug.js 可以帮你打印一些bug日志 正常线上不会使用 3.Figures.js go.js中自带了一些基本

数据可视化-gojs插件使用技巧总结

随着云计算时代的到来,由于Web技术的快速革新以及为了提供高质量的用户体验,数据可视化成为了前端技术发展的一大方向.为了解决这个问题,现如今涌现了很多优秀的第三方的javascript图形库,比如highcharts.js,echarts.js,d3.js,go.js- 数据可视化javascript插件对比 在HTML5标准支持下,web实现图形标准主要分为canvas和svg,上述的javascript图形库都是依赖2者之一作为底层库.Canvas基于像素,提供2D绘制函数,是一种HTML标

前端之gojs插件的基本使用

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

代码发布系统三

django基于channels完成群聊功能 后端框架不一定默认支持websocket 三步走前期配置 """ http协议还是走 urls.py 与 views.py /index/ index 浏览器地址栏输入网址即可 websocket协议走routing.py 与 consumers.py /chat/ ChatConsumer 借助于js内置对象new WebSocket('ws://127.0.0.1:8080/chat/') """

代码发布系统二

服务端如何给客户端推送消息 轮询(效率低.基本不用) """ 让客户端浏览器定时朝服务端发送请求数据的请求(比如每隔5s一次) 不足之处 消息延迟明显 消耗资源 """ 长轮询(兼容性好.使用较多) """ 服务端给每一个第一次来链接的客户端浏览器创建一个队列,之后客户端浏览器通过ajax朝各自的队列索要数据,如果没有数据会阻塞但是不会一直阻塞(pending),用了timeout加异常处理经过30s自动回去然后再次

代码发布平台前戏

单纯做后端的话,可以用FastAPI框架 1.服务端主动给客户端推送消息 截至目前为止,我们所写的web项目基本都是基于HTTP协议的 HTTP协议有四大特性:无链接(我请求 你响应 我俩没关系了 直接断开链接) 基于HTTP协议实现服务端主动给客户端推送消息好像有点麻烦--- 我们都经历过,浏览器打开一个网站不动,网站过一会儿自动弹出消息 再比如网页版本的微信和qq,我们所有人创建一个群聊,所有人加入群聊之后都不动 我朝群中发送一个消息,你们所有人的页面上都会出现我发送的消息 如何实现服务端主

JS图形化插件利器组件系列 —— Gojs组件

阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时会乱掉,刷新页面之后才能恢复正常,而且连线样式比较单一,容易让人产生视觉疲劳,加之最近公司在大力推行所谓的“工业4.0”,除了对自动化控制要求的提高之外,对这

可视化图表库--goJS

GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯javaSCript库 GoDiagram:用于WinForms的.NET图控件. GoXam:用于WPF/Silverlight的图控件.( Silverlight是一个跨浏览器的.跨平台的插件, 与flash竞争的富客户端技术) JGo:用于Swing/SWT中创建交互图的java库. GoJS可以做什