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. if语句，if...else语句的分析

    if语句的反汇编判断 if语句的反汇编判断基本是围绕JCC指令的,如果想要有深刻的理解,可以自行练习JCC指令 执行各类影响标志位的指令 jxx xxxx 1.案例一 mov eax,dword pt ...

  2. IDEA设置默认WorkingDirectory

  3. 网络流媒体协议之——RTSP协议

    RTSP(Real-Time Stream Protocol)协议是一个基于文本的多媒体播放控制协议,属于应用层.RTSP以客户端方式工作,对流媒体提供播放.暂停.后退.前进等操作.该标准由IETF指 ...

  4. python3.5.3rc1学习一

    print ("Hello Pythoh3")print('我喜欢"香蕉"')print('we\'ar go to shoping.')print(" ...

  5. 【矩阵快速幂】之奥运 hdu 2254

    1.城市的编号不是从0到n-1,而是随便的一个数字,需要离散化否则不能存相关信息 2.城市数不超过30,也就是说我的方法开矩阵不超过60,但是我残念的一开始以为最多可能有20000个不同城市    血 ...

  6. day71_10_16多表断关联

    ---恢复内容开始--- 本次环境: 配置settings INSTALLED_APPS = [ # ... 'rest_framework', ] DATABASES = { 'default': ...

  7. 【BZOJ3600】没有人的算术（替罪羊树+线段树）

    点此看题面 大致题意: 定义任意数对\(>0\),数对之间比大小先比第一位.后比第二位,一开始数列全为\(0\),要求你支持\(a_k=(a_x,a_y)\)和询问区间最大值所在位置两种操作. ...

  8. Exception "java.lang.ClassNotFoundException: com/intellij/codeInsight/editorActions/FoldingData"while constructing DataFlavor for: application/x-java-jvm-local-objectref; class=com.intellij.codeInsigh

    java.lang.​ClassNotFo​undExcepti​on in matlabR2014a 就是MATLAB和pycharm不能同时运行.关闭pycharm然后打开MATLAB就可以了.

  9. 爬虫——爬取Ajax动态加载网页

    常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...

  10. Ubuntu上的apt/apt-get等命令的实质意义和区别

    Ubuntu上的apt/apt-get等命令的实质意义和区别 一.前言 在使用apt和apt-get命令的时候我们常常会疑惑这两者有什么区别,因为大多数时间这两个命令能做很多相同的事情. 二.APT/ ...