GoJS

GoJS示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>

<script src="gojs/go.js"></script>

<script>

    var $ = go.GraphObject.make;

    // 第一步：创建图表

    var myDiagram = $(go.Diagram, "myDiagramDiv"); // 创建图表，用于在页面上画图

    // 第二步：创建一个节点，内容为武沛齐

    var node = $(go.Node, $(go.TextBlock, {text: "武沛齐"}));

    // 第三步：将节点添加到图表中

    myDiagram.add(node)

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>

<script src="gojs/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: 'lightblue'}));

    myDiagram.add(node3);

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>

<script src="gojs/go.js"></script>

<script src="gojs/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: "Diamond", width: 40, height: 40, fill: '#ddd'})

    );

    myDiagram.add(node4);

    // 需要引入Figures.js

    var node5 = $(go.Node,

        $(go.Shape, {figure: "Club", width: 40, height: 40, fill: 'red'})

    );

    myDiagram.add(node5);

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>

<script src="gojs/go.js"></script>

<script src="gojs/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}),

        $(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>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="myDiagramDiv" style="width:500px; min-height:450px; background-color: #DAE4E4;"></div>

<script src="gojs/go-debug.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: '#79C900', 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);

    var zipNode = $(go.Node, "Auto",

        $(go.Shape, {figure: "RoundedRectangle", height: 40, fill: '#79C900', stroke: '#79C900'}),

        $(go.TextBlock, {text: '本地打包', stroke: 'white'})

    );

    myDiagram.add(zipNode);

    var downloadToZipLink = $(go.Link,

        {fromNode: downloadNode, toNode: zipNode},

        $(go.Shape, {strokeWidth: 1}),

        $(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1})

    );

    myDiagram.add(downloadToZipLink);

    for (var i = 1; i < 6; i++) {

        var node = $(go.Node, "Auto",

            $(go.Shape, {figure: "RoundedRectangle", height: 40, fill: 'lightgray', stroke: 'lightgray'}),

            $(go.TextBlock, {text: '服务器' + i, stroke: 'white', margin: 5})

        );

        myDiagram.add(node);

        var nodeToZipLink = $(go.Link,

            {fromNode: zipNode, toNode: node, routing: go.Link.Orthogonal},

            $(go.Shape, {strokeWidth: 1, stroke: 'lightgray'}),

            $(go.Shape, {toArrow: "OpenTriangle", fill: null, strokeWidth: 1, stroke: 'lightgray'})

        );

        myDiagram.add(nodeToZipLink);

    }

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="diagramDiv" style="width:100%; min-height:450px; background-color: #DAE4E4;"></div>

<script src="gojs/go-no-logo.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: 'lightgray',

            stroke: 'lightgray'

        }, 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: 'lightgray'}, new go.Binding('stroke', 'link_color')),

        $(go.Shape, {toArrow: "OpenTriangle", stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),

        $(go.TextBlock, {font: '8pt serif', segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "link_text"))

    );

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

    /*

    diagram.model.addNodeData({key: "c4", text: '服务器3', parent: "c3", color: "lightgreen"})

    var c1 = diagram.model.findNodeDataForKey("c1");

    diagram.model.setDataProperty(c1, "color", "red");

    */

</script>

</body>

</html>

去除Logo

找到 go.js 文件，查找字符串 7eba17a4ca3b1a8346 ，然后替换指定内容。

下载GoJS插件：猛击这里 或 https://gojs.net/

GoJS的更多相关文章

  1. gojs绘流程图

    引用:http://www.tuicool.com/articles/eEruaqu http://www.open-open.com/lib/view/open1435023502544.html ...

  2. GoJS使用

    1. 先学习官网的这篇Get Started with GoJS教程入门,了解GoJS基础知识: 2. 浏览GoJS各个示例(Samples.Intro),找到契合自己业务需要的某个或者某几个例子,然 ...

  3. GoJS研究，简单图表制作。

    话不多说,先上图 我在这个中加入了缩略图.鼠标放大缩小等功能. <!doctype html> <html> <head> <title>Flowcha ...

  4. JS组件系列——Gojs组件，前端图形化插件之利器

    前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...

  5. gojs常用API-画布定义

    持续更新中 基础画布定义API画布初始位置 initialContentAlignment: go.Spot.Center,画布位置,定义后就不能拖动画布了,画布位置交由gojs管理 contentA ...

  6. GoJS学习笔记

    GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...

  7. 用gojs写的流程图demo

    领导要求,可以展开收缩子级,但是子级可以有多个父级,一开始用的dagre-d3.js,但是功能不是太全,无意中看到gojs,感觉还不错,所以拿来改了改... 代码地址:https://github.c ...

  8. GoJS 在 vue 项目中的使用

    GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...

  9. 开始使用GoJS

    GoJS是一个用于实现交互式图表的JavaScript库.本页将向您展示使用GoJS的必要条件. 由于GoJS是一个依赖于HTML5功能的JavaScript库,因此您需要确保您的页面声明它是一个HT ...

  10. GoJS拖动设计

    http://192.168.0.149:8035/gojs/intro/groups.html http://192.168.0.149:8035/gojs/intro/ports.html htt ...

随机推荐

  1. [Shell]常用语法

    赋值 FILE=$1 //=两边不能有空格 echo $FILE 逻辑判断 表达式 .if [ expression ]; then ... fi //[]两边必须有空格 . if [[ expres ...

  2. 无线AP知识点

    FAT模式指该AP可以独立配置,有独立的管理界面,就像普通的无线AP:FAT模式主要用在没有使用AC的小型网络中. FIT模式指该AP由TP-LINK AC(无线控制器)统一管控设置.    1,这个 ...

  3. Spring Cloud Eureka（四）：Eureka 配置参数说明

    Eureka Client 配置项(eureka.client.*) org.springframework.cloud.netflix.eureka.EurekaClientConfigBean 参 ...

  4. 2016 Multi-University Training Contest 3 部分题解

    1001,只要枚举区间即可.签到题,要注意的是输入0的话也是“TAT”.不过今天补题的时候却WA了好几次,觉得奇怪.原来出现在判断条件那里,x是一个int64类型的变量,在进行(x<65536* ...

  5. Linux 上的Tomcat配置输入域名直接访问项目

    申请的域名备案通过了,域名是在阿里云上面的买的,一块钱,当初买服务器是买着来玩玩的. 既然申请的域名已经备案通过了,也配置了域名解析 ,服务器上也装了Tomcat,部署了web项目,下面来配置下通过域 ...

  6. Eratos筛法（筛选素数）

    对于n以内的非素数必有k*n1=n(n1<n)  所以 可有p1,2p2,3p3把非素数筛选掉 实现代码: #include<iostream> #include<string ...

  7. docker安装并设置开机启动（CentOS7/8）

    CentOS7.2 docker分为CE和EE版本,EE版本收费,一般我们使用CE版本就满足要求了 docker安装及启动 docker安装很简单,直接使用如下命令安装即可,安装后的docker版本即 ...

  8. vs2017中信号与槽连接

    在vs2012里和在Qt Creator里添加信号和槽不一样,这里把两种环境下怎么添加详细说明一下 1.在vs2012里添加信号和槽 新建一个qt的项目QtDemo 在qtdeom.h里添加槽 pri ...

  9. P3951 小凯的疑惑

    P3951 小凯的疑惑 题解 题意也就是求解不能用 ax+by 表示的最大数 ans(a,b,x,y,都是正整数) 给定 a ( =7 ) ,  b ( =3 ) 我们可以把数轴非负半轴上的数按照a的 ...

  10. eclipse syso 自动补全设置方法

    eclipse syso 自动补全设置方法   转  https://blog.csdn.net/sinat_23536373/article/details/76512390   经常遇到打”sys ...