互動式視覺化js庫gojs使用介紹及技巧
目錄
- 1. go 簡介
- 2. gojs 應用場景
- 3. 為什麼選用 gojs:
- 4. gojs 上手指南
- 5. 小技巧（非常實用哦）
- 6. 實踐：實現節點分組關係視覺化互動圖
- 最後
1. gojs 簡介
gojs 是一個用於構建互動式視覺化圖的 js 庫，使用可自定義的模板和佈局構建複雜節點、連結和組，從而構建出簡單到複雜的各類圖，如流程圖、腦圖、組織圖、甘特圖等。而且提供了許多用於使用者互動的高階功能，例如拖放、複製和貼上、就地文字編輯......
gojs 是 Northwoods Software 的產品。Northwoods Software 創立於1995年，專注於互動圖控制元件和類庫。其願景是提供卓越的圖形使用者介面，目前已成長為跨各種平臺的互動式圖元件和類庫的世界級供應商。
2. gojs 應用場景
基於 gojs 的高可構建性，可以繪製很多種類的視覺化圖：
- 流程圖
- 腦圖
- 樹圖
- 甘特圖
- 柱狀圖
- 餅圖
- 地圖
- 儀表盤
- 更多示例圖(數百個)
3. 為什麼選用 gojs:
視覺化的庫非常多，如：echarts、highcharts、antv 系列、d3、以及www.cppcns.com今天的主角 gojs、......
按照可自定義繪圖的程度排序:
gojs、d3js > antv > echarts 、highcharts
如果需求簡單，不需要自定義圖元素，那麼 echarts 、highcharts 看中哪個 demo 效果就選用哪個庫。
如果有一定程度需要自定義圖元素，那麼可以看 antv g2/g6 demo 是否能滿足需求，可自定義大部分圖元素。
如果上面的都不能解決你的需求，那麼就是高可定製的，可以考慮 d3js、gojs，還是先去看 demo，看哪個更接近你的需求就採用哪個。
總結：gojs 的高可自定義性，非常適合需求複雜的圖互動。
4. gojs 上手指南
- 檢視案例：samples
目的是對 gojs 能做什麼有大概的瞭解，以及查詢及確認哪個案例效果更接近自己的需求，可參考案例程式碼完成需求，達到事半功倍的效果，也是上手非常不錯的借鑑資料。看完一到兩個案例程式碼，也可對 gojs 繪圖有個基本瞭解。
- 關鍵概念
看了案例程式碼後，對 gojs 繪圖有基本瞭解後。繪製圖之前瞭解下繪圖概念和結構對繪圖會更有幫助。好似寫作前知道提綱，寫內容思路會更清晰，效率更高。
- 開始動手繪製基本demo
- 引用庫
- 在頁面中建立 gojs 圖表容器,並給容器設定寬高，否則圖形繪製不出來
- 建立圖表例項
- 定義佈局、樣式、互動、屬性、事件等（可省略）
- 繫結資料，渲染圖表
// 圖表容器
<div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
// 引用
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
// 建立圖表例項
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
// 繫結資料
diagram.model = new go.GraphLinksModel(
[ //EBwxFSMQ 節點
{ key: "Alpha",color: "lightblue" },{ key: "Beta",color: "orange" },{ key: "Gamma",color: "lightgreen" },{ key: "Delta",color: "pinkEBwxFSMQ" }
],[ // 連線
{ from: "Alpha",to: "Beta" },{ from: "Alpha",to: "Gamma" },{ from: "Beta",{ from: "Gamma",to: "Delta" },{ from: "Delta",to: "Alpha" }
]
);
</script>
如果要對佈局、樣式、節點、組、連線、事件等控制，可自定義對應模板，下面以節點為例:
// 節點模板描述瞭如何構造每個節點
diagram.nodeTemplate = $(go.Node,"Auto",$(go.Shape,"RoundedRectangle",new go.Binding("fill","color")),$(go.TextBlock,new go.Binding("text","key"))
);
更多：指南、api
5. 小技巧（非常實用哦）
- 去除水印，圖表繪製出來後預設左上角有庫資訊的水印。
庫原始碼搜尋 7eba17a4ca3b1a8346，找到該位置：
a.yr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Kk,4,4);
註釋或刪除程式碼，改為如下：
a.yr=function () {return true;};
- es6 匯入 gojs: 參考loadingGojs
因為上面要去除水印，所以必須下載庫原始碼，並且現在前端專案基本都是基於 es6 模組組織檔案的。
故需求 下載 go-module.js，這樣就能在需要的文件中再引入：
import * as go from './go-module.js';
此外，因 go-module.js 已經打包過了，可配置打包排除該檔案的打包，減少打包時間。以 webpack 為例，修改如下：
{
test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test')],+ exclude: [resolve('src/assets/lib/')] // 打包好的庫都放該目錄下
}
- 去除藍色邊框：點選圖表，會看到圖表有藍色邊框。 來幫忙：
.diagram canvas {
border: none;
outline: none;
}
diagram 為圖表容器的 class 名。
6. 實踐：實現節點分組關係視覺化互動圖
- 需求：能正確展示組的層次，以及節點之間的關係。並實現互動：
- 單選節點、多選節點，獲取到節點資訊
- 選中組，能選中組中的節點，能獲取到組中的節點資訊
- 選中節點，當前節點視為根節點，能選中根節點連線下的所有節點，並獲取到節點資訊
- 從後端獲取到的介面資料：
介面資料
const data = {
"properties": [
{ "key": "t-2272","parentKey": "j-1051","name": "哈哈" },{ "key": "p-344","parentKey": "g--1586357764","name": "test" },{ "key": "t-2271","name": "查詢" },{ "key": "t-2275","parentKey": "j-1052","name": "開開心心" },{ "key": "j-1054","parentKey": "p-344","name": "嘻嘻" },{ "key": "t-2274",{ "key": "j-1051","parentKey": "p-444","name": "hello" },{ "key": "j-1052","name": "編輯" },{ "key": "t-2281","parentKey": "j-1054",{ "key": "p-444","parentKey": "g--1586357624",{ "key": "g--1586357624","name": "資料組1" },{ "key": "g--1586357764","name": "資料組2" },{ "key": "t-2273","name": "新建" }
],"dependencies": [
{ "sourceKey": "t-2272","targetKey": "t-2274" },{ "sourceKey": "t-2274","targetKey": "t-2275" },{ "sourceEBwxFSMQKey": "t-2273","targetKey": "t-2272" },{ "sourceKey": "t-2271",{ "sourceKey": "t-2272","targetKey": "t-2281" }
]
}
- 參考 gojs demo：grouping、 navigation
最後
實現效果思路下次分享，如果感興趣，可以利用資料，借鑑參考demo及本文分享的知識，自己動手實現下
我也是從新手（之前沒接觸過 gojs）到最終實現效果，本文如有不到位或錯誤的地方，亦或是好的意見，歡迎指出。
非常感謝！！！
到此這篇關於互動式視覺化js庫gojs使用介紹及技巧的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。