數據可視化-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實現。