复制如下内容保存到空白的.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. leetcode菜鸡斗智斗勇系列（7）--- 用最小的时间访问所有的节点

    1.原题: https://leetcode.com/problems/minimum-time-visiting-all-points/ On a plane there are n points ...

  2. 利用DFS算出有多少个连通图

    以下面一个题目为例,[题目链接]: https://www.luogu.com.cn/problem/P4961 题目中涉及求出八联通图的个数,这里给出这步的代码: memset(vis, 0, si ...

  3. Web--TypeConverter

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. pytest框架，使用print在控制台输入

    代码示例: import pytest@pytest.fixture(autouse=True,scope='session') #autouse=True,scope='session'def se ...

  5. 06. Z字型变换

    题目: 提交01: class Solution { public String convert(String s, int numRows) { int length = 2*numRows-2; ...

  6. NLP的比赛和数据集

    整理了NLP领域的比赛.数据集.模型 比赛 网站 主办方(作者) decaNLP http://decanlp.com/ Salesforce CLUE https://github.com/CLUE ...

  7. Nvidia发布更快、功耗更低的新一代图形加速卡

    导读 不出意外的,Nvidia在其举行的Supercomputing 19大会上公布了很多新闻,这些我们将稍后提到.但被忽略的一条或许是其中最有趣的:一张更快.功耗更低的新一代图形加速卡. 多名与会者 ...

  8. ch8 让div居中--使用外边距

    假设有一个布局,希望让其中的容器div在屏幕上水平居中,则只需要定义div的宽度,然后将水平外边距设置为auto <body> <div class="wrapper&qu ...

  9. php实现简单链式操作mysql数据库类

    <?php $dbConfig = require_once(dirname(__FILE__).'/config.php'); class Db{     public $conn;      ...

  10. redhat 7.6 常用命令

    cp 复制命令 diff  对比两个文件内容是否相同 cp -rvf  复制目录 r代表递归 v显示详细步骤 f强制 ls -ah   查看目录  a查看隐藏文件 h显示文件大小单位k less 逐行 ...