交互式可视化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 相关文章推荐
javascript面向对象程序设计(一)
Jan 29 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
Javascript call及apply应用场景及实例
Aug 26 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实现异步操作的研究
2013/02/03 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
python字典操作实例详解
2017/11/16 Python
Python中optparser库用法实例详解
2018/01/26 Python
python中pika模块问题的深入探究
2018/10/13 Python
python查看模块,对象的函数方法
2018/10/16 Python
python数据归一化及三种方法详解
2019/08/06 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
在python中使用nohup命令说明
2020/04/16 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
《要下雨了》教学反思
2014/02/17 职场文书
财务简历的自我评价
2014/03/05 职场文书
洗手间标语
2014/06/23 职场文书
个人工作年终总结
2015/03/09 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Pandas搭配lambda组合使用详解
2022/01/22 Python