复制如下内容保存到空白的.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

    随着互联网的兴起,各行各业的需求都在不断的增加.随着业务的扩大,企业给用户发送短信验证码的业务,也是如火如荼.在这里,calvin给各位开发者推荐阿里云短信平台.原因有二:1.接入较简单,开发成本低 ...

  2. 笔记-redis-订阅系统

    笔记-redis-订阅系统 1.      发布/订阅pub/sub 1.1.  基本命令 PUBLISH channel message #将信息发送到指定的频道. SUBSCRIBE channe ...

  3. 使用阿里云服务器配置frp实现Windows系统RDP内网穿透

    1.frp服务器采用阿里云ecs的centos7.5系统,客户端是台windows10的系统,做一个RDP服务的内网穿透用. 2.首先下载frp到服务器(链接:https://github.com/f ...

  4. Java--对象与类（二）

    final 实例域 可以将实例域定义为final.构建对象时必须初始化这样的域.也就是说在一个构造器执行之后,这个域被设置,并且之后无法对其修改 final 修饰符大多应用于基本(primitive) ...

  5. Zenefits CodeSprint：Knight or Knave

    题意是一堆人,从1到n编号,每个人i说一句话,x.x是正数表示i说x君是个好人,x是负数表示i说x君是坏人.问这个群体中最多能有多少好人,把这种情况用字典序的方式输出(好人用A表示,坏人用B表示),希 ...

  6. 【PAT甲级】1011 World Cup Betting (20 分)

    题意: 给出三组小数,每组三个,分别代表一场比赛下注一块钱胜平负的赔率.输出投注的方案并计算投注两块钱期望收获.(赔率相乘后乘上0.65再减去本金2块钱) AAAAAccepted code: #in ...

  7. iOS 开发之 开发一款自己的美颜相机

    以前在公司做项目时很少遇到对相机.图片进行处理的(非公司业务),只是偶尔上传,裁剪,预览下.近期自己准备写个相机应用,把图片处理的这些技术细节整理下.包含美颜相机,图片美化,简单拼图,艺术拼图等主要模 ...

  8. Controller层注解

    /** * Copyright © 2012-2014 <a href="https://github.com/thinkgem/jeesite">JeeSite< ...

  9. 1 观察者模式 observer 模拟监听器的实现

    参考(http://blog.csdn.net/allwefantasy/article/details/3062277) 假设我有一台电脑.电脑里面有一个事件,当你按下电源按钮的时候,那么显示器会亮 ...

  10. Python 基础之if if else

    1.代码块 以冒号作为开始,用缩进来划分区域,这个整体叫做代码块 if 5 == 5:   print(1)   print(2)   if True:   print(3)   print(4)   ...