前端交互式图表绘制库GoJS介绍

经人介绍看了下前端的图形绘制库GoJS,感觉挺强大的,特别适合来制作图形绘制工具。因为有需求要提供一个基于Web的图形编程工具,用它当前端看来是个不错的选择。唯一需要注意的是这东东不是免费的,而且还有些小贵,单应用单域名永久授权就要7千美刀,大伙们看情况使用吧。不过它提供带水印的试用版,可以用来先开发程序,网上也有各种去水印的方法,这里我就不提了。

首先,获取GoJS库,你可以用下面npm命令将JS库和范例都下载到本地。

$ npm install gojs --save

发布版的JS文件在”release”目录下。或者,你也可以在你的HTML文件头里引用GoJS的CDN

拿到JS文件后,我们就来写个官方的QuickStart范例。先写HTML,为了简化,文件体里面就一个DIV元素,用来绑定图表。

接下来,我们就要写JS了。GoJS是一个MVVM模型,也就是Model模型同View视图的双向绑定,类似于AngularJS。View部分包括了整个图表Diagram风格的定义,节点Node的定义,和连线Link的定义。我们一步步来,从视图开始,先写图表Diagram,整个GoJS图形最外层就是一个Diagram图表对象:

上面的代码定义了一个树形布局图表,也就是节点之间有父子关系,如果一个节点定义了父节点,就会有默认连线连接。如果不声明为树形布局,则任一连线需要指定的起始节点和末尾节点才行。

下一步写节点Node模板:

代码的解释都是在注释上,不多述了。Node模板可以定义多个,此时就要用”myDiagram.nodeTemplateMap.add()”方法来添加Node模板,而且每个Node模板需指定唯一的名称来区分。本例为了简洁只定义了一个Node模板。

然后,我们写连线Link模板:

同Node一样,Link也可以定义多个,用”myDiagram.linkTemplateMap.add()”方法来添加Link模板。

最后,我们写模型Model。GoJS的模型就是一个JSon格式,所以很容易保存分发。其中有规定必须有的字段属性,也有自定义的属性,自定义属性就需要在刚才写Node或Link模板时声明绑定。

因为要确保JS在HTML文档加载完执行,所以,上面的所有JS代码需放在”window.onload”事件内。朋友们可以把上面的代码保存下来试试。记得找6张可爱的图片,你将看到类似于下面的内容。
GoJS Sample

图表中的图形节点可以任意拖拉,连线也会相应的自动移动,这就是GoJS帮我们省力的地方。

另外,我基于GoJS官方范例,改了一个设计流程图的工具,为了简化代码,去除了其他jQuery和Bootstrap库。现在把代码贴在下面,说明都写在注释上了。感兴趣的朋友们,可以贴到文件里跑跑试试。

HTML部分

JS部分,即HTML上”main.js”的内容

跑下来,大家应该可以看到如下内容。
Flowchart Sample

本文中的示例代码,可以在这里下载
更详细的开发API文档可以在GoJS官方网站中找到。

发表评论

电子邮件地址不会被公开。 必填项已用*标注