复制如下内容保存到空白的.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. JDBC连接MySql例子

    1.注册MySql连接驱动 2.设置连接MySql连接字符串.用户名和密码 3.获取数据库连接 代码如下: // 加载驱动 Class.forName("com.mysql.jdbc.Dri ...

  2. C/C++网络编程9——多进程服务器端实现

    #include <iostream> #include <unistd.h> #include <cstdlib> #include <arpa/inet. ...

  3. 信息论相关概念：熵 交叉熵 KL散度 JS散度

    目录 机器学习基础--信息论相关概念总结以及理解 1. 信息量(熵) 2. KL散度 3. 交叉熵 4. JS散度 机器学习基础--信息论相关概念总结以及理解 摘要: 熵(entropy).KL 散度 ...

  4. selenium webdriver 操作select

    @Test public void test() { WebDriver driver=ExplorerBase.IESetting(); driver.get("http://unique ...

  5. select模块

    select模块 1.      select模块 源:select.py This module provides access to the select() and poll() functio ...

  6. 【转】bug management process

    What is Bug? A bug is the consequence/outcome of a coding fault What is Defect? A defect is a variat ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：让表格更加紧凑

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

  8. Linux centos7 VMware Apache访问日志不记录静态文件、访问日志切割、静态元素过期时间

    一.Apache访问日志不记录静态文件 网站大多元素为静态文件,如图片.css.js等,这些元素可以不用记录 vim /usr/local/apache2.4/conf/extra/httpd-vho ...

  9. eclispe+maven+ssm+sql_server/mysql配置

    链接: https://pan.baidu.com/s/1_BFI8XfS8l89-3-1IjlVZg 密码: x9in

  10. css元素隐藏方式

    1.opacity:设置一个元素的透明度 .hide {opacity: 0;} 2.visibility:设置一个元素可见\不可见.hide {visibility: hidden} .hide { ...