交互式可视化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发布错误的详细介绍
Aug 02 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
探索node之事件循环的实现
Oct 30 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue-cli2.9.3 详细教程
2018/04/23 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
python中的一些类型转换函数小结
2013/02/10 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
python创建和删除目录的方法
2015/04/29 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python文件写入write()的操作
2019/05/14 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
python的launcher用法知识点总结
2020/08/07 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
大专自我鉴定范文
2013/10/01 职场文书
会计应聘求职信范文
2013/12/17 职场文书
大学活动策划书范文
2014/01/10 职场文书
拓展策划方案
2014/06/03 职场文书
教师辞职书范文
2015/02/26 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis