隨着雲計算時代的到來，由於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;
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
gojs學習與思考
目前， 官方網站是學習gojs的最佳選擇。學習路徑：learn->introduction->samples->api元數據地圖實踐
gojs不足之處在於對於css動畫支持不夠，商用版權導致開發成本增加。優勢在於canvas庫封裝較好，提供豐富的交互事件，能夠滿足實際項目的個性化需求。在項目使用中，對於常見圖表，項目實際使用echartjs作為替代選擇，對於定制化需求則采用gojs實現。