图标插件的实战

图表插件使用心得（gojs/orgchart）

一：gojs
gojs是一款丰富的图表插件，对图表的操作功能支持比较多（支持实现场景多），底层是基于canvas的技术作为支持。对外提供了比较多的API接口，在数据传递中使用的是数组类型的格式（非树状结构）；在每个数组元素中通过key（唯一标识列）、parentKey（父组件标识列）的实现方案去实现的结构展示。
参考链接：gojs官网

二：orgChart
orgChart是一种组织架构图控件；通过API定义的接口可以实现组织结构图或者树状结构图。底层是基于dom元素的组合实现的。对外提供了一定的API接口，在数据传递的使用的是对象类型的格式（树状结构）。
参考链接：orgChart

三：对比

插件名称	优点	缺点
gojs	1、支持多种图表功能类型，应用场景比较多（提供丰富的API接口，可以自定义需要实现的接口）；2、支持拖拽（附缩略图）、放大、缩小的功能	1、使用canvas画布实现的功能，注定了没有DOM触发这个入口；2、存在License问题（如果是学习使用，可以通过注释插件的部分代码屏蔽水印问题）；3、上手略有复杂度
orgChart	1、插件上手使用简单；2、支持拖拽（无缩略图）、放大、缩小的功能；3、是通过DOM组合渲染出来的，可以在基础上自己实现更多的自己的诉求	1、使用场景比较单一，不适合负责的图表使用场景；2、插件本身提供的API和属性比较有限

四：心得
在项目的开始开发过程中，发现gojs这个插件支持的场景、功能比较多，所以选择了gojs这个组件，随着使用过程中发现在拖拽的时候画布中有水印（License）问题，且收费比较高，遂转而使用orgChart这个组件。类似组织结构、目标数这种图表的诉求，orgchart插件的功能基本都能满足，而且由于orgChart是通过DOM组合渲染的，可以通过DOM元素的属性完成更多自定义的需求。