交互式可视化js库gojs使用介绍及技巧


Posted in Javascript onFebruary 18, 2022

1. gojs 简介

gojs 是一个用于构建交互式可视化图的 js 库,使用可自定义的模板和布局构建复杂节点、链接和组,从而构建出简单到复杂的各类图,如流程图、脑图、组织图、甘特图等。而且提供了许多用于用户交互的高级功能,例如拖放、复制和粘贴、就地文本编辑......

gojs 是 Northwoods Software 的产品。Northwoods Software 创立于1995年,专注于交互图控件和类库。其愿景是提供卓越的图形用户界面,目前已成长为跨各种平台的交互式图组件和类库的世界级供应商。

2. gojs 应用场景

基于 gojs 的高可构建性,可以绘制很多种类的可视化图:

  1. 流程图
  2. 脑图
  3. 树图
  4. 甘特图
  5. 柱状图
  6. 饼图
  7. 地图
  8. 仪表盘
  9. 更多示例图(数百个)

3. 为什么选用 gojs:

可视化的库非常多,如:echartshighchartsantv 系列d3、以及今天的主角 gojs、......

按照可自定义绘图的程度排序:

gojs、d3js > antv > echarts 、highcharts

如果需求简单,不需要自定义图元素,那么 echarts 、highcharts 看中哪个 demo 效果就选用哪个库。

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

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

总结:gojs 的高可自定义性,非常适合需求复杂的图交互。

4. gojs 上手指南

目的是对 gojs 能做什么有大概的了解,以及查找及确认哪个案例效果更接近自己的需求,可参考案例代码完成需求,达到事半功倍的效果,也是上手非常不错的借鉴资料。看完一到两个案例代码,也可对 gojs 绘图有个基本了解。

  • 关键概念

看了案例代码后,对 gojs 绘图有基本了解后。绘制图之前了解下绘图概念和结构对绘图会更有帮助。好似写作前知道提纲,写内容思路会更清晰,效率更高。

交互式可视化js库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(
            [ // 节点
                { 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使用介绍及技巧

如果要对布局、样式、节点、组、连线、事件等控制,可自定义对应模板,下面以节点为例:

// 节点模板描述了如何构造每个节点
    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 模块组织文件的。

故需求 下载 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/')] // 打包好的库都放该目录下
}
  • 去除蓝色边框:点击图表,会看到图表有蓝色边框。css 来帮忙:
.diagram canvas {
    border: none;
    outline: none;
}

diagram 为图表容器的 class 名。

6. 实践:实现节点分组关系可视化交互图

交互式可视化js库gojs使用介绍及技巧

  1. 需求:能正确展示组的层次,以及节点之间的关系。并实现交互:
    • 单选节点、多选节点,获取到节点信息
    • 选中组,能选中组中的节点,能获取到组中的节点信息
    • 选中节点,当前节点视为根节点,能选中根节点连线下的所有节点,并获取到节点信息
  2. 从后端获取到的接口数据:

接口数据

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": "数据组1" },
  			{ "key": "g--1586357764", "name": "数据组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" }
  		]
  	}
  1. 参考 gojs demo:groupingnavigation

最后

实现效果思路下次分享,如果感兴趣,可以利用数据,借鉴参考demo及本文分享的知识,自己动手实现下

我也是从新手(之前没接触过 gojs)到最终实现效果,本文如有不到位或错误的地方,亦或是好的意见,欢迎指出。

非常感谢!!!

到此这篇关于交互式可视化js库gojs使用介绍及技巧的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
js添加绑定事件的方法
May 15 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
vue axios用法教程详解
Jul 23 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
gojs实现蚂蚁线动画效果
uni-app 微信小程序授权登录的实现步骤
Feb 18 #Javascript
详解TypeScript的基础类型
Feb 18 #Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 #Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
You might like
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python实现感知器
2017/12/19 Python
Python装饰器用法示例小结
2018/02/11 Python
python实现人民币大写转换
2018/06/20 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
几个MySql的面试题
2013/04/22 面试题
找工作最新求职信
2013/12/22 职场文书
部队学习十八大感言
2014/01/11 职场文书
小学二年级学生评语
2014/04/21 职场文书
施工安全协议书范本
2014/09/26 职场文书
综合素质评价自我评价
2015/03/06 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python