交互式可视化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 继承详解(二)
Jul 13 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
javascript实现文字跑马灯效果
Jun 18 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python猜数字算法题详解
2020/03/01 Python
Python进行特征提取的示例代码
2020/10/15 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
一套软件测试笔试题
2014/07/25 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
英文慰问信范文
2015/03/24 职场文书
家装电话营销开场白
2015/05/29 职场文书
污染环境建议书
2015/09/14 职场文书
初中美术教学反思
2016/02/17 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技