精华内容
下载资源
问答
  • GoJS

    2020-05-09 19:09:26
    GoJS兼容所有主流浏览器: Chrome 3+ Firefox 2+ Safari 3.2+ Opera 9+ IE 5.5+ 理论上,GoJS可以运行在任何浏览器环境上。 https://gitee.com/lanfei/GoJS

    GoJS兼容所有主流浏览器:

    Chrome 3+
    Firefox 2+
    Safari 3.2+
    Opera 9+
    IE 5.5+

    理论上,GoJS可以运行在任何浏览器环境上。

     

    https://gitee.com/lanfei/GoJS

    展开全文
  • GOJS

    2017-08-27 20:49:38
    [url]http://blog.csdn.net/medwardm/article/details/52353270[/url] [url]https://gojs.net/latest/samples/orgChartEditor.html[/url]
    [url]http://blog.csdn.net/medwardm/article/details/52353270[/url]


    [url]https://gojs.net/latest/samples/orgChartEditor.html[/url]
    展开全文
  • GOJS 1.8.9

    2018-01-16 16:48:27
    GOJS 1.8.9 GoJS的命名空间是 go,所有的GOJs包含的类型都在go这个命名空间下。所有的GoJS的类比如Diagram 、Node 、 Panel 、 Shape 、 TextBlock 都是以go.为前缀的
  • Gojs去水印

    2018-08-15 15:59:01
    GoJS能够基于html5浏览器绘制具有交互性的图形图表的JavaScript框架
  • gojs去水印

    2018-11-24 17:38:25
    gojs的去水印debug版本,版本号是v.1.8.28 由于是强制去水印,测试暂无报错
  • GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. See GoJS Samples Get Started with GoJS GoJS is a flexible library that can be used to ...
  • gojs去水印版本

    2018-03-16 13:48:03
    重要的事情说三遍 gojs 1.8.15去水印版本 gojs 1.8.15去水印版本 gojs 1.8.15去水印版本
  • GoJS 初探

    2020-11-04 14:38:06
    GoJS 是什么 GoJS是一个功能丰富的js库,用于在浏览器上实现自定义交互式图表和复杂的可视化图表。 GoJS通过可自定义的模板和布局构建复杂节点,链接和组,绘制js图表。 GoJS为用户交互提供了许多高级功能,如拖放...

    GoJS 是什么

    GoJS是一个功能丰富的js库,用于在浏览器上实现自定义交互式图表和复杂的可视化图表。 GoJS通过可自定义的模板和布局构建复杂节点,链接和组,绘制js图表。

    GoJS为用户交互提供了许多高级功能,如拖放,复制和粘贴,文本编辑,工具提示,上下文菜单,自动布局,数据绑定和模型,事务状态和撤销管理,事件处理程序,命令以及用于自定义操作的可扩展工具系统等等。

     

    为什么使用GoJS

    为了更直观地表达信息,我们常常需要用图形来展示数据以及逻辑关系,例如最常见的架构图、ER图、流程图、BPMN图等等,都是用来解决实际应用所遇到的问题。前端可使用canvas,svg,html+css技术来绘制图形。主流的前端库有mxGraph,Joint等这篇文章介绍的比较清楚了。

    我们对用户交互有很高的需求,并且有深入定制模板的需求,因此我们选择GoJS

     

    如何使用GoJS

    官网上介绍:GoJS支持图形模板 以及 图形对象属性与模型数据的数据绑定。

    GoJS supports graphical templates and data-binding of graphical object properties to model data.

    我们通过下面两个部分,来理解这句话。

     

    GoJS 的概念

    图表(Diagram)

    GoJS图表即最后看到的可视化视图,它是由这些部分构成的:一个或多个可能有连接关系的、可能成组的节点。所有这些节点和链路聚集在相同或不同的层中,并呈现出一定的布局(开发者预定好的或GoJS自动布局)。

     

    模型(Modal)

    每个图表都有一个数据模型,用于保存和解释开发者程序的数据。

    模型描述了节点之间的连接关系和组成员关系。图表自动为模型 Model.nodeDataArray 中的每个数据项创建一个节点或组, 为模型 GraphLinksModel.linkDataArray 中的每个数据项创建一个链接。而且,我们可以为每个数据对象添加所需的任何属性。

     

    模板(Template)

    模板声明了每个节点或链路的外观、位置和行为。

     

    面板(Panel)

    每个模板由GoJS中的面板Panel构成,面板本身作为一个图形对象GraphObject,保存其他图形对象作为它的元素,同时,面板需要负责图形对象的尺寸、位置。

    每个面板建立自己的坐标系,面板中的元素按顺序绘制,从而确定了这些元素的z坐标。

    面板有很多种类,比如 Panel.Position,Panel.Auto,Panel.Vertical,Panel.Horizontal 等等。

    所有部件(这里指构成面板的图形对象,比如 Shapes、Pictures、TextBlocls)都有默认模板。

     

    图形对象属性与模型数据属性的数据绑定使得数据的每个节点或链接都是唯一的。

    下面这张图会更直观地解释上面的概念:

     

    一个简单的栗子: Hello world

    1. 引入文件

    官网下载并引入GoJS,开发期间可加装go-debug.js文件,帮助开发

    <script src="go-debug.js"></script>
    

    2. 创建GoJS的容器

    创建一个GoJS容器,并设置固定大小,到时候GoJS会添加一个canvas到该容器,并且canvas元素自动调整为容器元素的大小。Tips:高度不能设置为百分比哦

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

    3. 创建图表

    现在我们创建图表,并引用该Div元素。请注意,js代码中的所有GoJS类型(如Diagram)的引用都以“ go.” 作为前缀。

    下面代码中我们使用了链路模板,添加了节点和链路数据模型。

    这里我们没有绘制节点或者链路模板,图表会显示默认样式。

    <script>
         var diagram = new go.Diagram("myDiagramDiv");
         diagram.model = new go.GraphLinksModel(
         [{ key: "Hello" },   // 节点数据
          { key: "World!" }],
         [{ from: "Hello", to: "World!"}]  // 链路数据
       );
     </script>
    

    绘制出来如下:

     

    数据双向绑定

    数据绑定是指从源对象中提取值并在目标对象上设置属性。目标对象就是图形对象(GraphObject),源对象是模型中保存的js数据对象。

    使用模板和数据绑定简化了必须存储在模型数据中的信息,灵活性非常强。当然并不是所有的数据属性都需要绑定使用。

     

    又一个简单的栗子:属性绑定

    1. 为了简化绘图时new对象的写法,我们直接将GoJS的构造函数赋值给一个简单的对象。

    var $ = go.GraphObject.make;    
    

    可以将这个方法理解为一个笔刷,绘图时使用。

    该函数可多层嵌套,参数类型较多。

    第一个参数声明类型,这个类型必须是图形对象的子类。

    其他参数类型:

    • 具有属性/值对的纯js对象 - 这些属性值是在正在构造的对象上设置的
    • 一个正在作为一个元素被添加到正在构造的面板(Panel)中的图形对象(GraphObject)
    • 一个GoJS枚举值常量,用作被构造的对象的唯一属性的值,可以接受这样一个值
    • 一个字符串,它设置正在构造的对象的TextBlock.textShape.figurePicture.sourcePanel.type属性
    • 一个RowColumnDefinition,用于描述Panel的行或列
    • ...

    2. 绘制两个节点,在数据模型中描述节点颜色,并按不同颜色显示

    图形的填充色是fill属性,我们把color属性绑定在fill上。GoJS提供了Binding对象,我们将他与GraphObject相关联。

    var diagram = $(go.Diagram, "myDiagramDiv");  
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { figure: "RoundedRectangle", fill: "white" },  
          new go.Binding("fill", "color")), 
        $(go.TextBlock,
          { margin: 5 },
          new go.Binding("text", "key"))  
       );
    
    var nodeDataArray = [
      { key: "Alpha", color: "lightblue" },  
      { key: "Beta", color: "pink" }
    ];
    var linkDataArray = [
      { from: "Alpha", to: "Beta" }
    ];
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    

    结果如下:

     

    除此之外,go.Binding的第三个参数,可传入一个函数,参数为数据绑定属性的值,返回值为GraphObject被绑定属性的值,比如:

    // 数据存在属性color,则返回'lightblue', 否则返回'pink'
    new go.Binding("fill","color",function( v ) { 
        return v ? "lightblue":"pink" ;
    } 
    

     

    数据监听

    model无法检测到nodeDataArray数组的修改或任何节点数据对象的修改。如果对节点的数据进行修改,并且需要图表自动刷新,则需要视情况调用相关api。

    对于绑定属性的变化,需要调用setDataProperty。像下面这样:

    function  flash () { 
      var model = diagram.model;
      //所有模型更改都应该在事务模型中进行 
      model.startTransaction("flash");
      var data = model.nodeDataArray[0];  //获取第一个节点数据 
      model.setDataProperty(data, "highlight", !data.highlight); // 修改属性
      model.commitTransaction("flash");
    }
    

     

    对于结构属性,比如添加删除节点,或者修改节点间关系的,api有 setKeyForNodeData, setCategoryForNodeData,GraphLinksModel.setToKeyForLinkData,orGraphLinksModel.setGroupKeyForNodeData等。

    或者,你可以注册一个监听事件来监听model节点的变化。

    当然,对于链路对象也是一样的。

     

    双向数据绑定(Two-way data binding)

    上述所有绑定只将属性的值从源数据转移到目标对象。但有时我们希望能够将GraphObject中的值传输回模型数据,使得模型数据与ui界面的图标中的数据保持一致。这可以通过使用TwoWay 绑定,它可以完成从源数据到目标对象,以及从目标对象到源数据的值传递。

    像这样调用makeTwoWay()进行双向绑定:

    new go.Binding("location", "loc").makeTwoWay();
    ...
    // 获取节点最新位置
    var data = diagram.model.nodeDataArray[0];  
    var node = diagram.findNodeForData(data);  
    var p = node.location.copy();  // p则取得了节点的位置
    

     

    双向绑定的目的是,当用户进行界面交互时,节点或者链路任何属性的更改都能保持在模型数据中。这样,我们就能通过保存模型,轻松地保存图表。

     

    实例:绘制动物关系图

    现在我们使用GoJS画一个简单的有层级的动物关系图,如下图:

    1. 分析

    • 整体布局:顶部居中,从上至下分层。这里我们使用一个布局对象(Diagram.layout),使用树布局。因为GoJS中的树是从左到右排列的,我们让他旋转90度。
    • 交互:允许放大缩小,整体拖拽,不允许单个节点拖拽, 禁用图表的一些默认交互功能
    • 数据模型:虽然布局是树布局,但数据模型不是,所以我们用链路模型
      • 节点:有文字,节点之间存在包含和被包含的情况(组信息)
      • 链路:描述节点之间的关系
    • 模板:
      • 节点:文字被圆角矩形包围
      • 链路:灰色线条,末端有箭头
      • 组:两种样式(黄色边框,黄色背景;蓝色边框,蓝色背景)

     

    2. 获取构造函数开始绘制

    var $ = go.GraphObject.make;
    

     

    3. 拿到画布,并设定基本的配置(操作\布局等)

    // 整体布局和用户鼠标键盘交互的配置
    var myDiagram = $(go.Diagram, 'myDiagramDiv', {
       initialContentAlignment: go.Spot.TopCenter,
       allowDrop: false,
       allowMove: false,
       allowSelect: false,
       layout: $(go.TreeLayout, {
         angle: 90
       })
    });

    4. 写数据模型

    我们在nodeDataArray中,设置好节点之间的成组关系,用isGroup 表示是否成组,group属性表示属于哪些组,这两个属性是默认的、并且固定地用于描述组和组成员关系。

    除此之外,我们还添加了category属性,这个属性也是固定属性,用法下面解释。

    我们在linkDataArray中,设置了节点之间的连接关系。

     const nodeDataArray = [
         { key: 1, text: '动物' },
         { key: 2, text: '脊椎动物', isGroup: true, category: 'OfGroups' },
         { key: 3, text: '无脊椎动物', isGroup: true, category: 'OfGroups' },
         { key: 4, text: '鱼类', isGroup: true, category: 'OfNodes', group: 2 },
         { key: 5, text: '鸟类', isGroup: true, category: 'OfNodes', group: 2 },
         { key: 21, text: '哺乳类', isGroup: true, category: 'OfNodes', group: 2 },
         { key: 6, text: '环节动物', isGroup: true, category: 'OfNodes', group: 3 },
         { key: 7, text: '节肢动物', category: 'OfNodes', isGroup: true, group: 3 },
         { key: 8, text: '鲶鱼', group: 4 },
         { key: 9, text: '沙丁鱼', group: 4 },
         { key: 10, text: '麻雀', group: 5 },
         { key: 22, text: '大象', group: 21 },
         { key: 11, text: '蝴蝶', group: 7 },
         { key: 12, text: '蚯蚓', group: 6 },
         { key: 13, text: '会飞', group: 35 },
         { key: 14, text: '会爬', group: 35 },
         { key: 15, text: '会游泳', group: 35 },
         { key: 25, text: '不会动', group: 35 },
         { key: 16, text: '吃的', isGroup: true, group: 36, category: 'OfNodes' },
         { key: 17, text: '喝的', isGroup: true, category: 'OfNodes', group: 36 },
         { key: 18, text: '水果', group: 16 },
         { key: 19, text: '植物', group: 16 },
         { key: 23, text: '水', group: 17 },
         { key: 24, text: '饮料', group: 17 },
         { key: 35, text: '动作', isGroup: true, category: 'OfGroups'},
         { key: 36, text: '食物', isGroup: true, category: 'OfGroups' }
       ];
    
       const linkDataArray = [
         { from: 1, to: 2 },
         { from: 1, to: 3 },
         { from: 8, to: 15 },
         { from: 9, to: 15 },
         { from: 10, to: 13 },
         { from: 22, to: 15 },
         { from: 12, to: 14 },
         { from: 11, to: 13 },
         { from: 10, to: 18 },
         { from: 22, to: 18 },
         { from: 8, to: 19 },
         { from: 9, to: 19 },
         { from: 10, to: 19 },
         { from: 11, to: 19 },
         { from: 12, to: 19 },
         { from: 22, to: 19 },
         { from: 25, to: 36 }
       ];
       myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    

    5. 绘制节点模板

    每个节点,我希望他有个圆角矩形框,里面填充文字。

    节点模板的面板中,go.Node作为顶级面板, go.Shape 和 go.TextBlock 都是子元素,布局关系应该设置成 Auto,同时我们做一些简单的属性绑定。

     myDiagram.nodeTemplate = $(
         go.Node,
         'Auto',
         $(go.Shape, 'RoundedRectangle', { fill: 'white' }),
         $(go.TextBlock, new go.Binding('text', 'text'))
       );
    

     

    6. 绘制链路模板

    因为线条有点多,为了突出节点,希望线条有点弧度,颜色浅一点,同时有标准的箭头指向

     myDiagram.linkTemplate = $(
         Go dot Link: premium domain name,
         go.Link.Bezier,
         $(go.Shape, {
           strokeWidth: 1,
           fill: '#8f99aa',
           stroke: '#8f99aa'
         }),
         $(go.Shape, { toArrow: 'Standard' })
       );
    

    7. 绘制组模板

    因为组的嵌套最多的有三级,比如 脊椎动物 > 鱼类 > 沙丁鱼,所以我们设置两个组模板,这时候就用到groupTemplateMap 。当然,节点和链路也有类似的模板地图,用来设置多个样式风格。

    这时候,很容易就理解了 节点中catalog的作用

     myDiagram.groupTemplateMap.add(
         'OfGroups',   // 注册组名
         $( go.Group, 'Auto',  // 设置组属性和排版
           {
             background: 'transparent',
             handlesDragDropForMembers: true, 
             // 使用网格布局
             layout: $(go.GridLayout, {
               wrappingWidth: Infinity,
               alignment: go.GridLayout.Position,
               cellSize: new go.Size(10, 10), // 每个part的最小尺寸
               spacing: new go.Size(4, 4) // 间隔
             })
           },
           // 整个黄色的矩形大框框
           $(go.Shape, 'Rectangle', { fill: null, stroke: '#FFDD33', strokeWidth: 2 }), 
           // 填充在矩形框里的标题部分,这里引入了go.Placeholder 对象,这个对象用于存放成员,并做一些填充
           // 标题和成员,我们竖向排版
           $(go.Panel,'Vertical', 
             // 标题模块,我们添加了一个展开收起的按钮,和标题文字是横向排布的
             $( go.Panel, 'Horizontal', 
               { stretch: go.GraphObject.Horizontal, background: '#FFDD33' },
               // 展开收起按钮
               $('SubGraphExpanderButton', { alignment: go.Spot.Right, margin: 5 }),
               // 标题文字和一些设置
               $(go.TextBlock,
                 {
                   alignment: go.Spot.Left,
                   margin: 5,
                   font: 'bold 18px sans-serif',
                   opacity: 0.75,
                   stroke: '#404040'
                 },
                 new go.Binding('text', 'text')
               )
             ), 
             $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
           ) 
         )
       );
       myDiagram.groupTemplateMap.add(
         'OfNodes',   // 注册组名
         // 分析同上
         $( go.Group, 'Auto',
           {
             background: 'transparent',
             ungroupable: true,
             computesBoundsAfterDrag: true,
             handlesDragDropForMembers: true, 
             layout: $(go.GridLayout, {
               wrappingColumn: 1,
               alignment: go.GridLayout.Position,
               cellSize: new go.Size(1, 1),
               spacing: new go.Size(4, 4)
             })
           },
           $( go.Shape, 'Rectangle', { fill: null, stroke: '#33D3E5', strokeWidth: 2 }),
           $( go.Panel,'Vertical', 
             $( go.Panel, 'Horizontal', 
               { stretch: go.GraphObject.Horizontal, background: '#33D3E5' },
               $('SubGraphExpanderButton', { alignment: go.Spot.Right, margin: 5 }),
               $( go.TextBlock,
                 {
                   alignment: go.Spot.Left,
                   editable: true,
                   margin: 5,
                   font: 'bold 16px sans-serif',
                   opacity: 0.75,
                   stroke: '#404040'
                 },
                 new go.Binding('text', 'text')
               )
             ), 
             $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
           ) 
         )
       );
    

     

    8. 交互行为

    如果还想在节点和图表上定义一些键盘和鼠标行为,可以参考这里:Properties Details 表格描述了交互行为的方法、参数。

     

    更多

    如果你还没有接触过GoJS, 并对它有兴趣的话,推荐学习路线为 Learn -> Intro -> Samples -> API

     

    总结

    GoJS是纯js,因此用户可以在不需要服务器和无插件的情况下愉快地构建自己的可视化视图。它交互行为丰富,自定义模板灵活,这里已经有非常多的例子,足够解决实际业务中的常见图表需求。

    当然了,所有的图形都是由点和线组成,如果开发者的想象力足够丰富,可以创造更多有趣、炫酷的图表。

    转载自:https://zhuanlan.zhihu.com/p/29772432

    展开全文
  • GoJS 2.0.6 去水印

    2019-03-29 11:31:25
    2.0.6 版去水印 go.js & go-debug.js gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的...gojs采用了面向对象的编程模式。 以图形对象表示绘图模板。 https://gojs.net/latest/index.html
  • gojs无水印版

    2017-11-03 11:17:48
    gojs无水印版本, GoJS属于功能丰富的JS库,在Web浏览器和平台上可实现自定义交互图和复杂的可视化效果,GoJS用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表。
  • GoJS 1.8.4 去水印

    2017-12-13 20:09:34
    1.8.4 版去水印 go.js & go-debug.js gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的... gojs采用了面向对象的编程模式。 以图形对象表示绘图模板。 https://gojs.net/latest/index.html
  • GoJS 1.8.2 去水印

    2017-11-12 21:44:48
    1.8.2 版去水印 go.js & go-debug.js gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的... gojs采用了面向对象的编程模式。 以图形对象表示绘图模板。 https://gojs.net/latest/index.html
  • GoJS 1.8.11 去水印

    2018-02-26 19:27:38
    gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架 https://gojs.net/latest/index.html
  • gojs自定义流程图

    2018-04-24 08:59:42
    Download GoJS JavaScript LibraryDownload GoJS JavaScript Library
  • gojs 无水印版

    2018-05-30 10:30:25
    gojs 无水印版,1.8版本。可以使用,根据官方文档可以开发
  • GoJS入门

    千次阅读 2018-01-23 19:25:14
    原文在这里:Get Started with GoJS GoJS 是一个实现交互式图表(Diagram)的Javascript 库。这个页面展示了使用GoJS的精髓。 因为GoJS是一个依赖于HTML5特性的JavaScript库,所以你要搞清楚浏览器是否支持HTML5...

    转载:https://www.jianshu.com/p/9001d6b292d8

    原文在这里:Get Started with GoJS

    GoJS 是一个实现交互式图表(Diagram)的Javascript 库。这个页面展示了使用GoJS的精髓。 因为GoJS是一个依赖于HTML5特性的JavaScript库,所以你要搞清楚浏览器是否支持HTML5,当然首先要加载这个库:

    <!DOCTYPE html>  <!-- HTML5 document type -->
    <html>
    <head>
      <!-- use go-debug.js when developing and go.js when deploying -->
      <script src="go-debug.js"></script>
    

    你可以在这里下载,也可以直接引用这个地址CDN:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.2/go-debug.js"></script>
    

    每个GoJS图表包含在一个页面中固定尺寸的HTML<div>的元素中:

    <!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
         In this case we also add a background color so we can see that area. -->
    <div id="myDiagramDiv"
         style="width:400px; height:150px; background-color: #DAE4E4;"></div>
    

    在Javascript代码中你可以传递<div>的id来创建一个图表(Diagram):

    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv");
    

    这样就会获得一个空白的图表(Diagram):


    Paste_Image.png

    记住GoJS的命名空间是 go,所有的GOJs包含的类型都在go这个命名空间下。所有的GoJS的类比如Diagram 、Node 、 Panel 、 Shape 、 TextBlock 都是以go.为前缀的。

    这篇文章会举例告诉你如何调用go.GraphObject.make来创建一个GoJS对象。更详细的介绍情况请看 Building Objects in GoJS,它使用$作为go.GraphObject.make的缩写,这样很方便。如果你的代码中$表示别的对象,你也可以选一个其它的短变量,比如$$或者MAKE或者GO.

    图表和模型

    图表(Diagram)的节点(Node)和链接(Link)是模型管理下的可视数据。GoJS支持模型-视图构架,当模型包含描述节点和链接的数据(Javascript的数组对象)。而且图表使用视图的方式来表现数据中的节点和链接对象。我们加载、编辑、保存的是模型而不是图表。你在模型的数据对象中添加你的APP需要的属性,而不是去修改Diagram 和GraphObject 类的原型。

    下面是一个模型和图表(Diagram)的例子,再下面就是这个例子生成的图:

    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });
    
    var myModel = $(go.Model);
    // in the model data, each node is represented by a JavaScript object:
    myModel.nodeDataArray = [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ];
    myDiagram.model = myModel;
    
    Paste_Image.png

    图表(Diagram)展示了模型的三个节点。也能够实现一些交互:

    • 点击和拖放背景图表一直跟着移动.
    • 通过点击选择一个节点,也可以拖放节点.
    • 为了创建一个选择框,直接点击握住背景,然后开始拖动就可以了。
    • 使用Ctrl-C和Ctrl-V或者通过拖放来实现拷贝和粘贴.
    • 因为可以使用撤销(undo)管理器,Ctrl-Z是撤销,Ctrl-Y是重做

    节点风格

    节点的风格是由GraphObjects的模板和对象的属性值决定的,为了创建一个节点( Node),我们有一些构建形状块(building block)的类:
    Shape, 显示预定义或者定制的带颜色的几何图形.
    TextBlock, to display (potentially editable) text in various fonts
    Picture, 显示图片
    Panel,一个包含了其它的对象集合的容器,可以根据Panel的类型修改位置、尺寸.

    所有的构建形状块(building block)都是从GraphObject 这个抽象类继承过来的, 所以我们可以随意的以GraphObjects 的方式引用他们。注意GraphObjects 不是一个HTML DOM 元素,所以不需要创建或者修改此类元素。

    我们想通过模型数据的属性来影响节点,且这个是通过数据绑定来实现的。数据绑定允许我们修改节点上的GraphObjects的属性来修改 的外观和行为。模型对象是Javascript对象。你可以选择任意你想用的属性名来定义模型。缺省的节点模板是非常简单的,一个节点包含一个TextBlock类.TextBlock的Text属性和模型的key要绑定到一起,就像这样的代码:
    The default Node template is simple: A Node which contains one TextBlock. There is a data binding

    myDiagram.nodeTemplate =
      $(go.Node,
        $(go.TextBlock,
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );
    

    注意没有Node.key的属性。但是你可以通过someNode.data.key来获取Node的key值。

    TextBlocks,Shapes和Pictures是GoJS的原始的构建形状块。TextBlocks不能包含图片,Shapes不能包含文字。如果你想要节点显示文字,必须用TextBlock。如果你想画或者填充一些几何图形,你必须使用Shape.
    一般情况下,节点的模块代码就像下面这个样子:

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical" // second argument of a Node/Panel can be a Panel type
        /* set Node properties here */
        { // the Node.location point will be at the center of each node
          locationSpot: go.Spot.Center
        },
    
        /* add Bindings here */
        // example Node binding sets Node.location to the value of Node.data.loc
        new go.Binding("location", "loc"),
    
        /* add GraphObjects contained within the Node */
        // this Shape will be vertically above the TextBlock
        $(go.Shape,
          "RoundedRectangle", // string argument can name a predefined figure
          { /* set Shape properties here */ },
          // example Shape binding sets Shape.figure to the value of Node.data.fig
          new go.Binding("figure", "fig")),
    
        $(go.TextBlock,
          "default text",  // string argument can be initial text string
          { /* set TextBlock properties here */ },
          // example TextBlock binding sets TextBlock.text to the value of Node.data.key
          new go.Binding("text", "key"))
      );
    

    Panels里面的GraphObjects 可以附着在任意的深度,而去每个类有他自己独有的属性,但是这里展示的是一般情况。

    现在我们已经看了如果创建一个节点模板,让我们看一个实际的例子。我梦将会创建一个简单的组织架构图-节点包含名字和图片。考虑下如下的节点模板:

    一个"水平"类型的节点,意思是节点中的元素将会水平并排放置,它有两个元素:
    一个Picture对象表示照片,包含一个图片源数据的绑定
    一个TextBlock对象表示名字,包含文字数据的绑定

    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });
    
    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        // the entire node will have a light-blue background
        { background: "#44CCFF" },
        $(go.Picture,
          // Pictures should normally have an explicit width and height.
          // This picture has a red background, only visible when there is no source set
          // or when the image is partially transparent.
          { margin: 10, width: 50, height: 50, background: "red" },
          // Picture.source is data bound to the "source" attribute of the model data
          new go.Binding("source")),
        $(go.TextBlock,
          "Default Text",  // the initial value for TextBlock.text
          // some room around the text, a larger font, and a white stroke:
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          // TextBlock.text is data bound to the "name" attribute of the model data
          new go.Binding("text", "name"))
      );
    
    var model = $(go.Model);
    model.nodeDataArray =
    [ // note that each node data object holds whatever properties it needs;
      // for this app we add the "name" and "source" properties
      { name: "Don Meow", source: "cat1.png" },
      { name: "Copricat", source: "cat2.png" },
      { name: "Demeter",  source: "cat3.png" },
      { /* Empty node data */  }
    ];
    myDiagram.model = model;
    

    以上的代码产生了下面这个图表:

    当不是所有的信息都被完全展示时,我们可能会想显示一些缺省的的状态:比如图片没有下载完或者还不知道名字的时候。例子中空节点的数据就可以作为占位符。

    模型的种类

    包含自定义模板的图表是非常漂亮的,但是或许我们想展示更多。比如我们想展示一个组织架构图,Don Meow的确是这个组织的老板。因此我们会创建一个完整的组织结构图,图中会在节点之间加上一些链接来展示人物关系,并且包含一个图层来自动排列节点。

    为了把链接加入图中,基础的模型是不够用的。我们将会加入GoJS中的两个其它的模型。他们是GraphLinksModel和 TreeModel。
    . (想要了解更多看 这里.)
    在GraphLinksModel中, 我们除了model.nodeDataArray还有 model.linkDataArray。他包含了一个Javascript 对象数组,每个数组表示一个指定了“from”和“to”的链接的节点key。这是一个例子表示节点A链接到节点B以及节点B链接到节点C:

    var model = $(go.GraphLinksModel);
    model.nodeDataArray =
    [
      { key: "A" },
      { key: "B" },
      { key: "C" }
    ];
    model.linkDataArray =
    [
      { from: "A", to: "B" },
      { from: "B", to: "C" }
    ];
    myDiagram.model = model;
    

    一个GraphLinksModel 允许你任意个节点间的链接,包含任意的方向。可以有十个A到B的链接,和三个相反的B到A的链接。

    一个TreeModel和GraphLinksModel有点不同。他并不包含一个链接数据的数组,而是创建了一个节点数据“父节点”的模型。链接用这种方式创建。下面是一个TreeModel的例子,包含一个节点A链接到B,B链接到C:

    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "A" },
      { key: "B", parent: "A" },
      { key: "C", parent: "B" }
    ];
    myDiagram.model = model;
    

    TreeModel比 GraphLinksModel简单,但是他不能随意创建链接关系,比如不能在两个节点间创建的多个链接,也不能有多个父节点。我们的组织架构图是简单树形层级结构,所以我们选择TreeModel来实现这个例子:
    首先,我们添加 几个节点,然后用TreeModel来指定key和父节点:

    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });
    
    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );
    
    var model = $(go.TreeModel);
    model.nodeDataArray =
    [ // the "key" and "parent" property names are required,
      // but you can add whatever data properties you need for your app
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
    

    图表(Diagram)布局

    正如你可以看到的,TreeModel自动创建需要的节点间的链接,但是它很难确定谁的父节点是谁。
    图表(Diagram)有一个缺省布局会管理那些没有具体位置的节点,会自动分配一个位置。我们可以显示的给每个节点分配一个位置来给组织排序,但是在我们的例子中一个更容易的解决方案是,我们会使用布局来自动排列位置。

    我们想要来显示一个层级,而且已经用了TreeModel,因此最自然的方式是使用TreeLayout。TreeLayout缺省的是从左到右,因此为了表示从上到下的我们会将angle属性设置为90.

    GoJS中使用布局通常很简单。每种类型的布局有一些属性能影响结果。每种布局都是有例子的:(比如TreeLayout Demo)

    
    // define a TreeLayout that flows from top to bottom
    myDiagram.layout =
      $(go.TreeLayout,
        { angle: 90, layerSpacing: 35 });
        
    

    GoJS 有许多其它的布局,你可以看 这里.
    给图表添加布局,我们可以看到如下结果:

    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
          layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                    { angle: 90, layerSpacing: 35 })
        });
    
    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );
    
    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
    
    Paste_Image.png

    这个图表看起来像是组织机构那么回事,但是我们可以做得更好。

    链接模板(Link templates)

    我们会构建一个新的链接模板(link template),这个模板可以更好的适应我们的宽的盒状的节点。链接Link是一个不同于Node的部分。链接主要的元素是链接的形状,而且必须是一个由 GoJS动态计算出来的形状。我们的链接是将会包含形状形状、比一般黑色的更宽一点的灰色笔画。不像缺省的链接模板,我们不会有箭头。而且我们会将Link routing 属性从Normal修改为Orthogonal,而且给他一个拐角值因此角会变园。

    
    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link,
        // default routing is go.Link.Normal
        // default corner is 0
        { routing: go.Link.Orthogonal, corner: 5 },
        $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape
    
        // if we wanted an arrowhead we would also add another Shape with toArrow defined:
        // $(go.Shape, { toArrow: "Standard", stroke: null }
        );
    

    综合我们的链接模板、节点模板、TreeModel和Treelayou,我们最终得到了一个完整的组织架构图。完整的代码在下面,紧跟的是生成的结果图:

    var $ = go.GraphObject.make;
    
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
          layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                    { angle: 90, layerSpacing: 35 })
        });
    
    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );
    
    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 5 },
        $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape
    
    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
        
    
    Paste_Image.png

    http://gojs.net/latest/learn/index.html


    展开全文
  • Exploring a GoJS Application in Real-time GoJS Beginner Tutorial #6.rar
  • GoJS学习

    2019-01-15 10:14:12
    GoJS中的类 http://blog.sina.com.cn/s/blog_72ef7bea0102vnnc.html GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。 ... gojs常用API-节点定义 ...
  • goJs简介

    千次阅读 2018-11-07 16:20:15
    GoJS属于功能丰富的JS库,在Web浏览器和平台上可实现自定义交互图和可视化效果,GoJS用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表。  GoJS给用户交互提供了许多先进的功能,如拖拽、复制、粘贴、...
  • 初探gojs

    2021-01-19 17:35:47
    //gojs <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="a1z51.23600852" name="spm-id" /> <title> demo </title> <script src=".....
  • gojs v1.8.15无水印

    2018-06-14 14:55:25
    gojs 1.8.15无水印版 。
  • gojs去除水印方式

    2018-05-18 08:40:06
    通过npm安装gojs官方依赖,或者其他方式安装依赖之后,将该同文件名的文件替换即可去除水印。npm安装执行npm i gojs --save,之前一直是npm install gojs有问题。
  • GoJs1.8.17去水印版

    2018-05-01 22:59:05
    GoJs的去除水印版本,官网下载地址https://gojs.net/latest/index.html
  • GoJS的流程图

    2018-12-27 13:57:47
    基于GoJS插件的一个流程图插件,且有做过微调整。颜色样式均作了改动。仅做参考,GoJS为收费插件。
  • gojs入门

    千次阅读 2017-10-29 10:41:17
    采自于goJS官方网站介绍:  GoJS是一个功能丰富的JavaScript库,为用户交互提供了许多高级功能,如拖放,复制和粘贴,就地文本编辑,工具提示,上下文菜单,自动布局,模板,数据绑定和模型,事务状态和撤销管理,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 764
精华内容 305
关键字:

GoJS