复制如下内容保存到空白的.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. 解决fastjson反序列化日期0000-00-00失败的方案

    解决fastjson反序列化日期0000-00-00失败的方案 22 Jul 2016 一.案例场景复原 示例场景里涉及两个class:TestDemo.java, DateBeanDemo.java ...

  2. iOS项目的一般开发流程

  3. linux目录与路径

    1.相对路径和绝对路径 绝对路径:一定是从根目录开始,如:/usr/share/doc 相对路径:如果想从/usr/share/doc/到/usr/share/man下,可以写成 cd ../man, ...

  4. c++将字符转换成字符串

    转载:https://blog.csdn.net/dididisailor/article/details/83189135 char c; string str; stringstream stre ...

  5. windows下安装subversion

    前言: 最近在写windows版本下svn hooks(钩子)  post-commit的实现.所以会需要在windows下安装相应的subversion.经过一番查询后,决定使用VisualSVN ...

  6. 使用eclipse部署springcloud config从GitHub上获取配置内容出现错误：Auth fail

    Eclipse点击Window > Preferences > General > Network Connections > SSH2 点击"Key Managem ...

  7. mysql5.7 忘记root密码修改方式

    参考文档: http://www.jb51.net/article/77858.htm # /etc/init.d/mysql stop --停止mysql服务 # /work/program/mys ...

  8. 学习Javascript的8张思维导图

    分别归类为: javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascr ...

  9. 为什么在/etc/profile中设定的环境变量，对子进程可见

    系统启动时有个过程是启动初始shell,执行一些固定目录下的脚本,比如/etc/profile.....(系统启动时执行一次),我们在这些文件中添加并导出环境变量 这样shell启动的其它的进程就具备 ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：表格单元格使用了 "bg-danger" 类

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