溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

交互式可視化js庫gojs使用技巧是什么

發(fā)布時間:2022-01-04 08:32:13 來源:億速云 閱讀:193 作者:iii 欄目:開發(fā)技術

本篇內容主要講解“交互式可視化js庫gojs使用技巧是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“交互式可視化js庫gojs使用技巧是什么”吧!

1. gojs 簡介

gojs 是一個用于構建交互式可視化圖的 js 庫,使用可自定義的模板和布局構建復雜節(jié)點、鏈接和組,從而構建出簡單到復雜的各類圖,如流程圖、腦圖、組織圖、甘特圖等。而且提供了許多用于用戶交互的高級功能,例如拖放、復制和粘貼、就地文本編輯......

gojs 是 Northwoods Software 的產(chǎn)品。Northwoods Software 創(chuàng)立于1995年,專注于交互圖控件和類庫。其愿景是提供卓越的圖形用戶界面,目前已成長為跨各種平臺的交互式圖組件和類庫的世界級供應商。

2. gojs 應用場景

基于 gojs 的高可構建性,可以繪制很多種類的可視化圖:

  1. 流程圖

  2. 腦圖

  3. 樹圖

  4. 甘特圖

  5. 柱狀圖

  6. 餅圖

  7. 地圖

  8. 儀表盤

  9. 更多示例圖(數(shù)百個)

3. 為什么選用 gojs:

可視化的庫非常多,如:echarts、highcharts、antv 系列、d3、以及今天的主角 gojs、......

按照可自定義繪圖的程度排序:

gojs、d3js > antv > echarts 、highcharts

如果需求簡單,不需要自定義圖元素,那么 echarts 、highcharts 看中哪個 demo 效果就選用哪個庫。

如果有一定程度需要自定義圖元素,那么可以看 antv g2/g6 demo 是否能滿足需求,可自定義大部分圖元素。

如果上面的都不能解決你的需求,那么就是高可定制的,可以考慮 d3js、gojs,還是先去看 demo,看哪個更接近你的需求就采用哪個。

總結:gojs 的高可自定義性,非常適合需求復雜的圖交互。

4. gojs 上手指南

  • 查看案例:samples

目的是對 gojs 能做什么有大概的了解,以及查找及確認哪個案例效果更接近自己的需求,可參考案例代碼完成需求,達到事半功倍的效果,也是上手非常不錯的借鑒資料??赐暌坏絻蓚€案例代碼,也可對 gojs 繪圖有個基本了解。

  • 關鍵概念

看了案例代碼后,對 gojs 繪圖有基本了解后。繪制圖之前了解下繪圖概念和結構對繪圖會更有幫助。好似寫作前知道提綱,寫內容思路會更清晰,效率更高。

交互式可視化js庫gojs使用技巧是什么

  • 開始動手繪制基本demo

  • 引用庫

  • 在頁面中創(chuàng)建 gojs 圖表容器, 并給容器設置寬高,否則圖形繪制不出來

  • 創(chuàng)建圖表實例

  • 定義布局、樣式、交互、屬性、事件等(可省略)

  • 綁定數(shù)據(jù),渲染圖表

    // 圖表容器
    <div id="myDiagramDiv" ></div>
    
    // 引用
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    
    <script>
        // 創(chuàng)建圖表實例
        var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");

        // 綁定數(shù)據(jù)
        diagram.model = new go.GraphLinksModel(
            [ // 節(jié)點
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" },
                { key: "Delta", color: "pink" }
            ],
            [ // 連線
                { from: "Alpha", to: "Beta" },
                { from: "Alpha", to: "Gamma" },
                { from: "Beta", to: "Beta" },
                { from: "Gamma", to: "Delta" },
                { from: "Delta", to: "Alpha" }
            ]
        );
    </script>

交互式可視化js庫gojs使用技巧是什么

如果要對布局、樣式、節(jié)點、組、連線、事件等控制,可自定義對應模板,下面以節(jié)點為例:

    // 節(jié)點模板描述了如何構造每個節(jié)點
    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
        $(go.TextBlock, new go.Binding("text", "key"))
    );

交互式可視化js庫gojs使用技巧是什么

更多:指南、api

5. 小技巧(非常實用哦)

  • 去除水印,圖表繪制出來后默認左上角有庫信息的水印。

庫源碼搜索 7eba17a4ca3b1a8346,找到該位置:

a.yr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Kk,4,4);

注釋或刪除代碼,改為如下:

a.yr=function () {return true;};
  • es6 導入 gojs: 參考loadingGojs

因為上面要去除水印,所以必須下載庫源碼,并且現(xiàn)在前端項目基本都是基于 es6 模塊組織文件的。

故需求 下載 go-module.js,這樣就能在需要的文件中再引入:

import * as go from './go-module.js';

此外,因 go-module.js 已經(jīng)打包過了,可配置打包排除該文件的打包,減少打包時間。以 webpack 為例,修改如下:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')],
    + exclude: [resolve('src/assets/lib/')] // 打包好的庫都放該目錄下
}
  • 去除藍色邊框:點擊圖表,會看到圖表有藍色邊框。css 來幫忙:

.diagram canvas {
    border: none;
    outline: none;
}

diagram 為圖表容器的 class 名。

6. 實踐:實現(xiàn)節(jié)點分組關系可視化交互圖

交互式可視化js庫gojs使用技巧是什么

  1. 需求:能正確展示組的層次,以及節(jié)點之間的關系。并實現(xiàn)交互:

    • 單選節(jié)點、多選節(jié)點,獲取到節(jié)點信息

    • 選中組,能選中組中的節(jié)點,能獲取到組中的節(jié)點信息

    • 選中節(jié)點,當前節(jié)點視為根節(jié)點,能選中根節(jié)點連線下的所有節(jié)點,并獲取到節(jié)點信息

  2. 從后端獲取到的接口數(shù)據(jù):

接口數(shù)據(jù)

const data = {
  		"properties": [
  			{ "key": "t-2272", "parentKey": "j-1051", "name": "哈哈" },
  			{ "key": "p-344", "parentKey": "g--1586357764", "name": "test" },
  			{ "key": "t-2271", "parentKey": "j-1051", "name": "查詢" },
  			{ "key": "t-2275", "parentKey": "j-1052", "name": "開開心心" },
  			{ "key": "j-1054", "parentKey": "p-344", "name": "嘻嘻" },
  			{ "key": "t-2274", "parentKey": "j-1052", "name": "查詢" },
  			{ "key": "j-1051", "parentKey": "p-444", "name": "hello" },
  			{ "key": "j-1052", "parentKey": "p-444", "name": "編輯" },
  			{ "key": "t-2281", "parentKey": "j-1054", "name": "嘻嘻" },
  			{ "key": "p-444", "parentKey": "g--1586357624", "name": "test" },
  			{ "key": "g--1586357624", "name": "數(shù)據(jù)組1" },
  			{ "key": "g--1586357764", "name": "數(shù)據(jù)組2" },
  			{ "key": "t-2273", "parentKey": "j-1051", "name": "新建" }
  		],
  		"dependencies": [
  			{ "sourceKey": "t-2272", "targetKey": "t-2274" },
  			{ "sourceKey": "t-2274", "targetKey": "t-2275" },
  			{ "sourceKey": "t-2273", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2271", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2272", "targetKey": "t-2281" }
  		]
  	}

到此,相信大家對“交互式可視化js庫gojs使用技巧是什么”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

AI