复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>GoJS实例</title>

    <style>

        #myDiagramDiv {

            width: 400px;

            height: 500px;

            background-color: #DAE4E4;

        }

    </style>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>

</head>

<body>

    <div id="myDiagramDiv"></div>

    <script>

        //为了简洁

        var $ = go.GraphObject.make;

        var diagram = new go.Diagram("myDiagramDiv");

        //节点模板描述如何构建每个节点

        diagram.nodeTemplate =

            $(go.Node, "Auto", //形状自动填充适合

                $(go.Shape, "RoundedRectangle", // 使用圆角长方形

                    // 将Shape.fill绑定到Node.data.color

                    new go.Binding("fill", "color")),

                $(go.TextBlock, {

                        margin: 3 //文字的间距

                    },

                    // 将TextBlock.text绑定到Node.data.key

                    new go.Binding("text", "key"))

            );

        // 模型仅包含描述图表的基本信息

        diagram.model = new go.GraphLinksModel( //两个JavaScript对象数组

            [

                // 添加“颜色”属性

                {

                    key: "Alpha",

                    color: "lightblue"

                },

                {

                    key: "Beta",

                    color: "orange"

                },

                {

                    key: "Gamma",

                    color: "lightgreen"

                },

                {

                    key: "Delta",

                    color: "pink"

                }

            ],

            [ // 数组中的连接数据

                {

                    from: "Alpha",

                    to: "Beta"

                },

                {

                    from: "Alpha",

                    to: "Gamma"

                },

                {

                    from: "Beta",

                    to: "Beta"

                },

                {

                    from: "Gamma",

                    to: "Delta"

                },

                {

                    from: "Delta",

                    to: "Alpha"

                }

            ]);

        diagram.initialContentAlignment = go.Spot.Center;

        // 启用Ctrl-Z撤消和Ctrl-Y重做

        diagram.undoManager.isEnabled = true;

    </script>

</body>

</html>

GoJS实例3的更多相关文章

  1. GoJS实例1

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. GoJS实例4

    此示例更改链接数据的“to”属性,使链接连接到不同的节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> &l ...

  3. GoJS实例2

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta name=&quo ...

  4. GoJS最简单的实例

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. GoJS 友情链接

    目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...

  6. GoJS简单示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

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

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

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

    阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...

随机推荐

  1. 关于java自学的内容以及感受

    这周主要学习了关于数组方面的知识包括一维数组以及多维数组(他们所储存数据默认值为0),以下为我根据相关知识编写的简单程序: public class test { public static void ...

  2. ElementUI 删除 el-table 当前选中行（不是selection列）

    一句话即可: this.表格绑定的data.splice(this.$refs.表格的ref.store.states.selection, 1)

  3. 3 JavaScript正则表达式

    正则表达式:Regular(有规则的) Expression 正则表达式是由一个字符序列形成的搜索模式,可用于文本搜索和文本替换 常见于字符串的search和replace方法 var str = & ...

  4. Windows驱动开发-DPC定时器

    DCP是一种使用更加灵活的定时器,可以对任意间隔时间进行定时.DPC定时器的内部使用了一个定时器对象KTIMER,当你设定了定时器之后,从设定开始起经过这个时间之后操作系统会将一个DPC定时器的例程插 ...

  5. Linux 7 和 CentOS 7 收到重要内核安全更新

    导读 Red Hat 和 CentOS 宣布了其 Red Hat Enterprise Linux 7 和 CentOS Linux 7 操作系统系列重要内核安全更新的可用性. 据悉,这些更新解决了两 ...

  6. H.264 中的Annex B格式和AVCC格式

    首先要理解的是没有标准的H.264基本流格式.文档中的确包含了一个Annex,特别是描述了一种可能的格式Annex B格式,但是这个并不是一个必须要求的格式.标准文档中指定了视频怎样编码成独立的包,但 ...

  7. A way to use NAT network by using Oracle virtualBox

    That is true. Vmware  is easy and confortable tools to make vitrual machines than Oracle virtual box ...

  8. Py西游攻关之基础数据类型(六)-文件操作

    Py西游攻关之基础数据类型 - Yuan先生 https://www.cnblogs.com/yuanchenqi/articles/5782764.html 九 文件操作 9.1 对文件操作流程 打 ...

  9. JAVA关于回文判断的实现

    (一). 设计思想: 首先输入字符串,然后判断长度若长度为0或1则输出TRUE若长度大于一则进行判断, 若符合条件则输出TRUE反之输出FALSE. (二)程序源代码 import java.util ...

  10. 【快学springboot】3.多种接受参数的方式

    前往掘金查看:https://juejin.im/post/5d05e5f9f265da1b6c5f74b4 前言 在开发中,我们常常会碰到多种传参的方式.这里,我们就来总结下,springboot中 ...