GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和 HTML5 Canvas程序中创建流程图，且极大地简化你的JavaScript / Canvas 程序。

慧都网小编为大家准备了一套完整的GoJS的示例，将以连载的形式展开，供大家学习和交流讨论。

这不是GoJS的真正最小化演示，因为我们确实指定了自定义Node模板，但它非常简单。如果单击链接，示例的完整来源如下所示。

此示例使用Node模板设置Diagram.nodeTemplate，该模板数据绑定文本字符串和形状的填充颜色。

该Diagram.initialContentAlignment设置导致图表内容出现在图的视口的中心。

使用鼠标和常用键盘命令，你可以平移，选择，移动，复制，删除和撤消/重做。在触摸设备上，使用手指作为鼠标，并保持手指静止以显示上下文菜单。默认上下文菜单支持当时为所选对象启用的大多数标准命令。

有关更精细和更有说服力的样本，请参阅基本示例。有关从服务器加载JSON数据的示例，请参阅最小化JSON示例。有关从服务器加载XML数据的示例，请参阅最小化XML示例。

以下为在页面中查看此示例页面的源代码：

  function init() {

    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element

                  {

                    initialContentAlignment: go.Spot.Center,  // center the content

                    "undoManager.isEnabled": true  // enable undo & redo

                  });

    // define a simple Node template

    myDiagram.nodeTemplate =

      $(go.Node, "Auto",  // the Shape will go around the TextBlock

        $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },

          // Shape.fill is bound to Node.data.color

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

        $(go.TextBlock,

          { margin: 8 },  // some room around the text

          // TextBlock.text is bound to Node.data.key

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

      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links

    myDiagram.model = new go.GraphLinksModel(

    [

      { 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" }

    ]);

  }

<div id="sample" deep="0">

  <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.

       This also adds a border to help see the edges of the viewport. -->

  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>

  <p>

    This isn't a truly <i>minimal</i> demonstration of <b>GoJS</b>,

    because we do specify a custom Node template, but it's pretty simple.

    The whole source for the sample is shown below if you click on the link.

  </p>

  <p>

    This sample sets the <a>Diagram.nodeTemplate</a>, with a <a>Node</a> template that data binds both the text string and the shape's fill color.

    For an overview of building your own templates and model data, see the <a href="../learn/index.html">Getting Started tutorial.</a>

  </p>

  <p>

    The <a>Diagram.initialContentAlignment</a> setting causes the diagram's contents

    to appear in the center of the diagram's viewport.

  </p>

  <p>

    Using the mouse and common keyboard commands, you can pan, select, move, copy, delete, and undo/redo.

    On touch devices, use your finger to act as the mouse, and hold your finger stationary to bring up a context menu.

    The default context menu supports most of the standard commands that

    are enabled at that time for the selected object.

  </p>

  <p>

    For a more elaborate and capable sample, see the <a href="basic.html">Basic</a> sample.

    For a sample that loads JSON data from the server,

    see the <a href="minimalJSON.html">Minimal JSON</a> sample.

    For a sample that loads XML data from the server,

    see the <a href="minimalXML.html">Minimal XML</a> sample.

  </p>

</div>

以下为在GitHub上查看此示例页面的源代码：

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Minimal GoJS Sample</title>

<meta name="description" content="An almost minimal diagram using a very simple node template and the default link template." />

<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->

<meta charset="UTF-8">

<script src="../release/go.js"></script>

<script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->

<script id="code">

  function init() {

    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element

                  {

                    initialContentAlignment: go.Spot.Center,  // center the content

                    "undoManager.isEnabled": true  // enable undo & redo

                  });

    // define a simple Node template

    myDiagram.nodeTemplate =

      $(go.Node, "Auto",  // the Shape will go around the TextBlock

        $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },

          // Shape.fill is bound to Node.data.color

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

        $(go.TextBlock,

          { margin: 8 },  // some room around the text

          // TextBlock.text is bound to Node.data.key

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

      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links

    myDiagram.model = new go.GraphLinksModel(

    [

      { 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" }

    ]);

  }

</script>

</head>

<body onload="init()">

<div id="sample">

  <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.

       This also adds a border to help see the edges of the viewport. -->

  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>

  <p>

    This isn't a truly <i>minimal</i> demonstration of <b>GoJS</b>,

    because we do specify a custom Node template, but it's pretty simple.

    The whole source for the sample is shown below if you click on the link.

  </p>

  <p>

    This sample sets the <a>Diagram.nodeTemplate</a>, with a <a>Node</a> template that data binds both the text string and the shape's fill color.

    For an overview of building your own templates and model data, see the <a href="../learn/index.html">Getting Started tutorial.</a>

  </p>

  <p>

    The <a>Diagram.initialContentAlignment</a> setting causes the diagram's contents

    to appear in the center of the diagram's viewport.

  </p>

  <p>

    Using the mouse and common keyboard commands, you can pan, select, move, copy, delete, and undo/redo.

    On touch devices, use your finger to act as the mouse, and hold your finger stationary to bring up a context menu.

    The default context menu supports most of the standard commands that

    are enabled at that time for the selected object.

  </p>

  <p>

    For a more elaborate and capable sample, see the <a href="basic.html">Basic</a> sample.

    For a sample that loads JSON data from the server,

    see the <a href="minimalJSON.html">Minimal JSON</a> sample.

    For a sample that loads XML data from the server,

    see the <a href="minimalXML.html">Minimal XML</a> sample.

  </p>

</div>

</body>

</html>

想要查看在线操作示例，可以点击此处>>>>>

轻量级流程图控件GoJS示例连载（一）：最小化的更多相关文章

  1. Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例

    看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...

  2. 【干货分享】JPager.Net MVC超好用轻量级分页控件

    JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现非常简单,使用也非常简单. JPager.Net  M ...

  3. Net MVC轻量级分页控件

    JPager.Net MVC超好用轻量级分页控件   JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现 ...

  4. 自定义JS控件-简单示例

    1.  业务需求: 制作 一个按钮对象,然后 像 winfrom  那样调用 就可以了: 首先 我们新建一个 MyControls的 JS文件:(插入如下代码) //这里运用的面向对象的思想 ,新建了 ...

  5. silverlight控件阴影效果示例

    <ScrollViewer MaxHeight="400" VerticalScrollBarVisibility="Auto" HorizontalSc ...

  6. JQuery与GridView控件结合示例

    JQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1. ...

  7. asp.net微软图表控件使用示例

    <configuration> <system.webServer> <handlers> <remove name="ChartImageHand ...

  8. 大量的QT控件及示例发放

    QT属性控件项目https://github.com/lexxmark/QtnProperty 比特币交易软件https://github.com/JulyIGHOR/QtBitcoinTrader ...

  9. Android自定义组合控件详细示例 (附完整源码)

    在我们平时的Android开发中,有时候原生的控件无法满足我们的需求,或者经常用到几个控件组合在一起来使用.这个时候,我们就可以根据自己的需求创建自定义的控件了,一般通过继承View或其子类来实现. ...

随机推荐

  1. iOS中WebSocket的使用

    https://github.com/square/SocketRocket 简单使用如下 1.初始化socket _webSocket = [[SRWebSocket alloc] initWith ...

  2. xwiki 知识管理系统

    搭建一个知识管理平台, 用于知识库管理/规范管理, 可以作wiki, 可以将word/excel等导入进去, 支持全文搜索, 可以记周报, 会议纪要. 现在有很多文档管理系统, 比如阿里的语雀.腾讯的 ...

  3. 【CodeChef EDGEST】Edges in Spanning Trees（树链剖分+树上启发式合并）

    点此看题面 大致题意: 给你两棵\(n\)个点的树,对于第一棵树中的每条边\(e_1\),求存在多少条第二棵树中的边\(e_2\),使得第一棵树删掉\(e_1\)加上\(e_2\).第二棵树删掉\(e ...

  4. B1013(通过)

    这种方法是采用B1017的那个求素数的算法,并且送一个比较大的数值当作上线(20000),也可以进一步压缩,但是这个数已经够用了,就没有再试了. python方便是方便,但是真的慢 def isPri ...

  5. linux 硬盘满了后，查看使用目录占用空间情况

    cd 切换到目录, du -ah --max-depth=1 查看当前目录下的 文件夹 占用情况

  6. 解决WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    问题: 当我想要利用win10本地的cmd进行: ssh root@192.168.1.230 时,出现了如下错误: C:\Users\Raodi>ssh root@192.168.1.230 ...

  7. Orm框架(AntOrm,Ktorm)在mac机器上如何使用代码生成

    Orm框架介绍 AntOrm 是我维护的一个开源csharp -netcore 项目 Ktorm 是一个大神开源的kotlin项目 由于我工作上都用到了,为了提高工作效率 我写了一个mac端工具帮助快 ...

  8. 软件----- idea 配置创建一个简单javase项目

    1.显示工具栏和工具按钮,勾选上 如图,在左侧会增加对应的 2.设置项目结构,选择jdk 点击new  选择需要jdk 3.创建一个简单的java文件,和eclipse与myeslipse 差不多, ...

  9. matplotlib画预测框以及打标签

    https://blog.csdn.net/weixin_43338538/article/details/89003280 https://blog.csdn.net/yjl9122/article ...

  10. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...