数据可视化-gojs插件使用技巧总结

随着云计算时代的到来，因为Web技术的快速革新以及为了提供高质量的用户体验，数据可视化成为了前端技术发展的一大方向。为了解决这个问题，现现在涌现了不少优秀的第三方的javascript图形库，好比highcharts.js,echarts.js,d3.js,go.js…

数据可视化javascript插件对比

在HTML5标准支持下，web实现图形标准主要分为canvas和svg，上述的javascript图形库都是依赖2者之一做为底层库。Canvas基于像素，提供2D绘制函数，是一种HTML标签，依赖于HTML，只能经过javascript 绘制图形；SVG为矢量，提供一系列图形元素、动画、事件机制，既能够独立使用，也能够嵌入HTML中使用。 图形库的封装程度也有区分，像highchart.js,echart.js属于过分封装，只暴露了数据模型接口，做为开发者很难修改内部API实现，不利于企业实现定制化需求，而像d3.js,go.js更多的是对图表的节点、连线及工具的封装，并预留了接口便于开发者进行定制化开发。另外，图形库的商业版权也各尽不一样，像highchart.js,go.js都是要收费的，而echart.js,d3.js则是免费开源的。

gojs简介及特色

gojs是一款基于canvas的图形库，是由Northwoods公司开发的商用javascript插件，能够基于项目的不一样需求实现具备交互性的各种图表，好比流程图，树图，关系图，力导图等等。gojs采用面向对象思想，以图形对象表示绘图单元，JSON对象做为数据模型，图形对象经过属性绑定的方式从数据模型获取相关的属性值。

 
图形对象与数据模型关系图

gojs数据模型

gojs的数据模型以是否为树图分为GraphLinksModel和TreeModel两种JSON对象，GraphLinksModel包含nodeDataArray和linkDataArray属性，而TreeModel只包含nodeDataArray属性。

gojs绘图单元

gojs的绘图单元很好理解，好比图中一个节点，一条线均可以理解成一个绘图单元，gojs经过不一样的绘图模板实现不一样的绘图单元，好比node,group,line…另外，gojs经过模板地图的方式管理不一样样式的相同类型的绘图单元。

gojs图表实践

gojs绘图流程包括建立图形对象，构建数据模型，设置图形对象属性，绑定数据模型，添加交互行为。 
 
gojs建立流程图一、建立图形对象能够把$理解成一个画笔，而myDiagram理解成画布。

var $ = go.GraphObject.make;

画图时，经过$调用gojs自身的属性和方法 ， 完成节点和连线的绘制，attrs为图形对象属性。

var myDiagram = $( go.Diagram, "dom_id" , {attrs});
myDiagram.nodeTemplate = $( go.Node, "Auto", {attrs});
myDiagram.linkTemplate = $( go.link, {attrs});

二、构建数据模型 
数据模型分为2种，下面以图形连线模型为例，它包括nodeDataArray和linkDataArray:

var dataModel = $(go.GraphLinksModel);
dataModel.nodeDataArray = [{},{}];
dataModel.linkDataArray = [{},{}];
myDiagram.model = dataModel;

三、图形对象属性绑定 
举例说明，好比将图形对象的边框宽度strokeWidth和数据模型的宽度Width进行绑定：

new go.binding("strokeWidth","width");

四、添加交互行为 
举例说明，好比为node添加鼠标事件，经过给其属性添加相应方法进行事件绑定：

{mouseEnter:onNodeMouseEnter}
...
function onNodeMouseEnter(){
   //do something
}

五、本地调试 
建议安装Node.js，完成后安装http-server:

npm install http-server

而后在项目主目录启动本地Web服务： 

gojs学习与思考

目前， 官方网站是学习gojs的最佳选择。学习路径：learn->introduction->samples->api

元数据地图实践  gojs不足之处在于对于css动画支持不够，商用版权致使开发成本增长。优点在于canvas库封装较好，提供丰富的交互事件，可以知足实际项目的个性化需求。在项目使用中，对于常见图表，项目实际使用echartjs做为替代选择，对于定制化需求则采用gojs实现。