交互式可视化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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php 类自动载入的方法
2015/06/03 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
pandas重新生成索引的方法
2018/11/06 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
四群教育工作实施方案
2014/03/26 职场文书
大学学习计划书范文
2014/05/02 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
挂职个人工作总结
2015/03/05 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Java 死锁解决方案
2022/05/11 Java/Android