码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-20 12:35:44      阅读:4646      评论:0      收藏:0      [点我收藏+]

标签:需求   添加   aam   标准   自身   data-   sample   dem   web   

随着云计算时代的到来,由于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创建流程图1、创建图形对象可以把$理解成一个画笔,而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、构建数据模型 
数据模型分为2种,下面以图形连线模型为例,它包括nodeDataArray和linkDataArray:
var dataModel = $(go.GraphLinksModel);
dataModel.nodeDataArray = [{},{}];
dataModel.linkDataArray = [{},{}];
myDiagram.model = dataModel;
3、图形对象属性绑定 
举例说明,比如将图形对象的边框宽度strokeWidth和数据模型的宽度Width进行绑定:
new go.binding("strokeWidth","width");
4、添加交互行为 
举例说明,比如为node添加鼠标事件,通过给其属性添加相应方法进行事件绑定:
{mouseEnter:onNodeMouseEnter}
...
function onNodeMouseEnter(){
   //do something
}
5、本地调试 
建议安装Node.js,完成后安装http-server:
npm install http-server
然后在项目主目录启动本地Web服务: 
技术分享

gojs学习与思考

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

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

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

标签:需求   添加   aam   标准   自身   data-   sample   dem   web   

原文地址:http://www.cnblogs.com/rudylemon/p/6418468.html

(4)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!