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

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

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

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

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

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

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

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

  1.   function init() {
  2.     if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
  3.  
  4.     var $ = go.GraphObject.make;  // for conciseness in defining templates
  5.  
  6.     myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
  7.                   {
  8.                     initialContentAlignment: go.Spot.Center,  // center the content
  9.                     "undoManager.isEnabled": true  // enable undo & redo
  10.                   });
  11.  
  12.     // define a simple Node template
  13.     myDiagram.nodeTemplate =
  14.       $(go.Node, "Auto",  // the Shape will go around the TextBlock
  15.         $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
  16.           // Shape.fill is bound to Node.data.color
  17.           new go.Binding("fill", "color")),
  18.         $(go.TextBlock,
  19.           { margin: 8 },  // some room around the text
  20.           // TextBlock.text is bound to Node.data.key
  21.           new go.Binding("text", "key"))
  22.       );
  23.  
  24.     // but use the default Link template, by not setting Diagram.linkTemplate
  25.  
  26.     // create the model data that will be represented by Nodes and Links
  27.     myDiagram.model = new go.GraphLinksModel(
  28.     [
  29.       { key: "Alpha", color: "lightblue" },
  30.       { key: "Beta", color: "orange" },
  31.       { key: "Gamma", color: "lightgreen" },
  32.       { key: "Delta", color: "pink" }
  33.     ],
  34.     [
  35.       { from: "Alpha", to: "Beta" },
  36.       { from: "Alpha", to: "Gamma" },
  37.       { from: "Beta", to: "Beta" },
  38.       { from: "Gamma", to: "Delta" },
  39.       { from: "Delta", to: "Alpha" }
  40.     ]);
  41.   }
  1. <div id="sample" deep="0">
  2.   <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
  3.        This also adds a border to help see the edges of the viewport. -->
  4.   <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
  5.   <p>
  6.     This isn't a truly <i>minimal</i> demonstration of <b>GoJS</b>,
  7.     because we do specify a custom Node template, but it's pretty simple.
  8.     The whole source for the sample is shown below if you click on the link.
  9.   </p>
  10.   <p>
  11.     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.
  12.     For an overview of building your own templates and model data, see the <a href="../learn/index.html">Getting Started tutorial.</a>
  13.   </p>
  14.   <p>
  15.     The <a>Diagram.initialContentAlignment</a> setting causes the diagram's contents
  16.     to appear in the center of the diagram's viewport.
  17.   </p>
  18.   <p>
  19.     Using the mouse and common keyboard commands, you can pan, select, move, copy, delete, and undo/redo.
  20.     On touch devices, use your finger to act as the mouse, and hold your finger stationary to bring up a context menu.
  21.     The default context menu supports most of the standard commands that
  22.     are enabled at that time for the selected object.
  23.   </p>
  24.   <p>
  25.     For a more elaborate and capable sample, see the <a href="basic.html">Basic</a> sample.
  26.     For a sample that loads JSON data from the server,
  27.     see the <a href="minimalJSON.html">Minimal JSON</a> sample.
  28.     For a sample that loads XML data from the server,
  29.     see the <a href="minimalXML.html">Minimal XML</a> sample.
  30.   </p>
  31. </div>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title>Minimal GoJS Sample</title>
  6. <meta name="description" content="An almost minimal diagram using a very simple node template and the default link template." />
  7. <!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
  8. <meta charset="UTF-8">
  9. <script src="../release/go.js"></script>
  10. <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  11. <script id="code">
  12.   function init() {
  13.     if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
  14.     var $ = go.GraphObject.make;  // for conciseness in defining templates
  15.     myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
  16.                   {
  17.                     initialContentAlignment: go.Spot.Center,  // center the content
  18.                     "undoManager.isEnabled": true  // enable undo & redo
  19.                   });
  20.     // define a simple Node template
  21.     myDiagram.nodeTemplate =
  22.       $(go.Node, "Auto",  // the Shape will go around the TextBlock
  23.         $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
  24.           // Shape.fill is bound to Node.data.color
  25.           new go.Binding("fill", "color")),
  26.         $(go.TextBlock,
  27.           { margin: 8 },  // some room around the text
  28.           // TextBlock.text is bound to Node.data.key
  29.           new go.Binding("text", "key"))
  30.       );
  31.     // but use the default Link template, by not setting Diagram.linkTemplate
  32.     // create the model data that will be represented by Nodes and Links
  33.     myDiagram.model = new go.GraphLinksModel(
  34.     [
  35.       { key: "Alpha", color: "lightblue" },
  36.       { key: "Beta", color: "orange" },
  37.       { key: "Gamma", color: "lightgreen" },
  38.       { key: "Delta", color: "pink" }
  39.     ],
  40.     [
  41.       { from: "Alpha", to: "Beta" },
  42.       { from: "Alpha", to: "Gamma" },
  43.       { from: "Beta", to: "Beta" },
  44.       { from: "Gamma", to: "Delta" },
  45.       { from: "Delta", to: "Alpha" }
  46.     ]);
  47.   }
  48. </script>
  49. </head>
  50. <body onload="init()">
  51. <div id="sample">
  52.   <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
  53.        This also adds a border to help see the edges of the viewport. -->
  54.   <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
  55.   <p>
  56.     This isn't a truly <i>minimal</i> demonstration of <b>GoJS</b>,
  57.     because we do specify a custom Node template, but it's pretty simple.
  58.     The whole source for the sample is shown below if you click on the link.
  59.   </p>
  60.   <p>
  61.     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.
  62.     For an overview of building your own templates and model data, see the <a href="../learn/index.html">Getting Started tutorial.</a>
  63.   </p>
  64.   <p>
  65.     The <a>Diagram.initialContentAlignment</a> setting causes the diagram's contents
  66.     to appear in the center of the diagram's viewport.
  67.   </p>
  68.   <p>
  69.     Using the mouse and common keyboard commands, you can pan, select, move, copy, delete, and undo/redo.
  70.     On touch devices, use your finger to act as the mouse, and hold your finger stationary to bring up a context menu.
  71.     The default context menu supports most of the standard commands that
  72.     are enabled at that time for the selected object.
  73.   </p>
  74.   <p>
  75.     For a more elaborate and capable sample, see the <a href="basic.html">Basic</a> sample.
  76.     For a sample that loads JSON data from the server,
  77.     see the <a href="minimalJSON.html">Minimal JSON</a> sample.
  78.     For a sample that loads XML data from the server,
  79.     see the <a href="minimalXML.html">Minimal XML</a> sample.
  80.   </p>
  81. </div>
  82. </body>
  83. </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. python基础-TCP协议和UDP协议

    TCP协议是一种流式协议,UDP协议是一种数据包协议. TCP和UDP是OSI模型中传输层的协议.TCP提供可靠的通信传输,而UDP则常被用于让广播和细节控制交给应用的通信传输. TCP和UDP区别总 ...

  2. 2.Python网络编程_TCP(简略版)

    TCP监听套接字: 当新的客户端请求连接时,服务器端监听套接字收到消息,会分配一个新的套接字对应于客户端(新socket包括四部分:源IP.源端口号.目的IP.目的端口号)用于接收客户端的消息,仔细观 ...

  3. windows server2008 R2下mysql 5.7版本中修改编码为utf-8的方法步骤

    首先通过 show variables like 'character_set_%'; 查看mysql字符集情 默认编码为 latin1 然后关闭数据库 在mysql安装目录下找到my.ini文件 在 ...

  4. Kafka为什么不支持读写分离得原因？-干货

    在 Kafka 中,出产者写入音讯.顾客读取音讯的操作都是与 leader 副本进行交互的,从 而结束的是一种主写主读的出产消费模型.数据库.Redis 等都具有主写主读的功用,与此同时还支撑主写从读 ...

  5. ulimit 用法和系统优化

    ulimit :用于shell启动进程所占用的资源 -a:显示目前资源限制的设定: -c <core文件上限>:设定core文件的最大值,单位为区块: -d <数据节区大小>: ...

  6. matlab练习程序（贝塞尔曲线）

    下面三个公式分别是一次.二次和三次贝塞尔曲线公式: 通用的贝塞尔曲线公式如下: 可以看出,系数是由一个杨辉三角组成的. 这里的一次或者二次三次由控制点个数来决定,次数等于控制点个数-1. 实现的效果如 ...

  7. Python爬取拉勾网招聘信息并写入Excel

    这个是我想爬取的链接:http://www.lagou.com/zhaopin/Python/?labelWords=label 页面显示如下: 在Chrome浏览器中审查元素,找到对应的链接: 然后 ...

  8. 公式推导【IoUNet//ECCV2018】

    Jiang B, Luo R, Mao J, Xiao T, Jiang Y. Acquisition of localization confidence for accurate object d ...

  9. vscode自定义vue模板代码

    File--->preference -->user Snippets-->搜索html.json 编辑 加入以下自定义代码内容 "Html5-Vue": { & ...

  10. 【Oracle】rman基于时间点恢复

    rman基于时间点恢复 场景: 由于某研究的误操作,导致财务模块的数据丢失,如何使用rman基于时间点恢复数据. 思路 1.克隆数据库的虚拟机,直接对数据库的数据进行恢复 RMAN> shutd ...