GoJs图表绘图模板--Diagram

前言

前文中介绍了go.Node(节点)、go.Link(连线)。还有节点和连线内部的go.TextBlock(文本)、go.Shape(几何图形)、go.Panel(面板)等等。这些都是通过HTML的新增标签canvas上进行绘制的。在构建go.Diagram(图表)的时候会创建一个canvas在提供的容器div中,创建的canvas会继承容器div的宽高,因此在创建容器的时候通常会设置一个具体的宽高。而go.Diagram又通过model来关联节点和连线的对象信息。通过go.Diagram的‘桥梁’，这形成了图形和数据的关联。

go.Diagram的属性(通用布局)

{
    initialContentAlignment: go.Spot.Center, //设置图表在整个画布中的位置
    isReadOnly: true, // 设置图表是否只读
    allowMove: true, // 设置是否可以对图表进行移动
    allowDragOut:true, // 设置是够可以拖拽图表内部的元素
    allowDelete: true, // 设置是否可以删除图表内的元素
    allowCopy: true, // 设置是够可以复制图表内的元素
    allowClipboard: true, // 设置是够可以粘贴已经复制的元素
    scale: 1.0, // 设置图表的处开始加载的放大比例
    minScale: 0.5, // 设置图表可以调整到的最小的放大比例
    maxScale: 1.5, // 设置图表可以调整到的最大的放大比例
    scrollMargin: 500, // 设置图表距离画布边缘的距离
    allowHorizontalScroll:false,//设置图表是否有横向滚动条
    allowInsert:true,//设置是够可以向图表内添加元素
    allowResize:true, //设置是够可以对图表内的元素进行拖放大小
    allowRotate:true,//设置是够可以旋转图表内部的元素
    lastInput,//获取鼠标指针上一次的位置
    nodeTemplate:$$(),//设置图表内部的节点的模板
    linkTemplate:$$(),//设置节点内部的连线模板
    'undoManager.isEnabled': true, // 设置是否可以通过Ctrl Z(撤回)和Ctrl Y(复原)操作 
    'toolManager.hoverDelay': 100, // 设置提示框出现的延迟时间
    'toolManager.toolTipDuration': 10000, // 设置提示框消失前的显示时间
    'grid.visible': true, // 设置背景是否显示网格
    'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom, // 设置鼠标滚轮的行为是放大缩小还是对图表进行上下滚动
},

initialContentAlignment属性

initialContentAlignment设置图表在整个画布中的位置，是整个图表的大小小于画布的时候生效。如果图标大小大于画布大小，则填充显示。

isReadOnly属性

gojs中元素会有很多的交互功能，isReadOnly属性设置这些交互属性是否生效。如果设置只读，则无法选中等操作。

allowMove、allowDragOut、allowDelete、allowCopy等allow属性

allowMove属性设置图标初始化完成之后是否可以对图表进行移动。allowDragOut是设置图表内部的元素比如节点是否可以拖拽，调色板就是需要设置此属性。可以拖拽到其他的画布当中。 allowDelete设置节点是否可以删除，包括通过方法和键盘的delete按键。allowCopy设置是否可以复制节点，一般是通过键盘的ctrl c进行复制。allowClipboard和allowCopy一块使用，粘贴出复制的节点元素。allowHorizontalScroll设置图表横向超出画布的时候是否出现横向滚动条。allowInsert设置是否可以向图表内添加元素。allowResize是设置节点是否可以拖拽改变大小，在节点边缘会出现缩放箭头。allowRotate是设置节点旋转。

scale、minScale、maxScale属性

设置图表的初始化时候的放大比例，默认为1。后面我们可以方法冬天改变其大小以完成放大缩小按钮的功能。minScale和maxScale则是对其变化范围做一个限制。

lastInput属性

lastInput属性获取鼠标指针上一次的位置,通常在事件的方法中，通过e.diagram.lastInput.viewPoint来获取上次鼠标点击的位置。以保证我们需要展示的其他信息的一个相对位置进行展示。

nodeTemplate、linkTemplate属性

nodeTemplate是节点的设置模板，linkTemplate是连线的设置模板。

toolManager.hoverDelay、toolManager.toolTipDuration属性

toolManager.hoverDelay属性是设置当鼠标移入目标节点、文字、图片等元素的时候出现提示信息的时间延迟。toolManager.toolTipDuration属性是设置提示框出现的时间长短。时间都为ms。

undoManager.isEnabled、grid.visible、toolManager.mouseWheelBehavior属性

undoManager.isEnabled属性和allowDelete属性类似，都是为了允许通过常用的键盘快捷键对节点的一个操作。其设置的是是否可以通过Ctrl Z进行撤回上一步操作和Ctrl Y进行复原刚才的操作。

go.Diagram的属性(树形布局)

{
    alignment:"AlignmentCenterChildren",//设置父节点和子节点的对齐方式
    angle: 0, //设置树形布局的朝向,默认向右
    nodeSpacing:20,//设置子节点之间的距离
    layerSpacing: 35, //设置节点和子节点之间的距离
    isTreeExpanded:false, // 设置节点是否折叠
    parent:'1',//设置节点的父级节点
    rowSpacing:20,//设置兄弟节点之间的距离
    level:0,//设置节点的层级,父节点是0级
}

对于树形布局来说,是存在父子后代关系的.因此对于树形布局来说，是有一些特有属性的。因此对于树形布局的特有属性进行一个介绍

alignment、angle属性

alignment属性是设置父节点和子节点的对齐方式，这种一般来说不需要设置。默认的对齐方式是最常见也是最合适的,但是还是可能有一些特殊的需求。angle属性则是切换属性布局的朝向，最常见的是朝右侧布局。但是有些需求需要变换布局的朝向，或者是通过改变布局的朝向下，做成流程图的显示图形。

parent、level属性

parent属性根据树形结构的特殊性，可以根据parent属性来确定节点之间的相互关系，因此属性布局在没有link数据的时候，通过parent属性也是可以正常渲染图形的。level属性则是设置节点的层级，默认根节点是0级，我们前文的数据示例中的key值设置为1-1、1-1-1也是基于层级的体现进行设置。

nodeSpacing、layerSpacing、rowSpacing属性

nodeSpacing属性是设置节点的子节点之间的距离，换句话说也就是设置level相同的节点之间的距离。layerSpacing属性是设置子节点和父节点之间的距离，也就是相邻level层级之间的距离。rowSpacing属性是设置节点的子节点之间的距离，换句话说也就是设置level相同，并且同一个父级节点的节点之间的距离，

总结

以上的属性除了设置之外，也可以获取这些属性的数值。这样就可以对获取的数值操作之后做出一个相对的位置或者显示的变换。

这篇好文章是转载于：学新通技术网