GoJS 交互式可视化库使用指南与高级技巧

作者：纸飞机时间：2026-10-24 21:31:32浏览：337

本文详细介绍GoJS交互式可视化JS库的核心功能与应用场景，涵盖流程图、脑图等多种图表类型。重点解析GoJS相比ECharts、D3等库的高可定制性优势，并提供从基础引入、ES6模块化导入到去除水印、自定义样式的实用技巧。最后通过节点分组关系可视化的实战案例，演示如何实现复杂的节点交互与数据绑定，帮助开发者高效构建专业级可视化应用。

1. GoJS 简介

GoJS 是一款专为构建交互式可视化图形设计的 JavaScript 库。它允许开发者通过自定义模板和布局，创建从简单到复杂的各类图形，包括流程图、脑图、组织图、甘特图等。此外，该库还提供了丰富的用户交互功能，如拖放操作、复制粘贴以及就地文本编辑等，极大地提升了用户体验。

GoJS 由 Northwoods Software 开发，该公司成立于1995年，长期专注于交互图控件和类库的研究与生产。Northwoods Software 致力于提供卓越的图形用户界面，现已发展成为跨平台交互式图组件和类库的全球领先供应商。

2. GoJS 应用场景

凭借 GoJS 极高的可构建性，用户可以绘制多种类型的可视化图表：

流程图
脑图
树图
甘特图
柱状图
饼图
地图
仪表盘
更多示例图（数百个）

3. 为什么选用 GoJS：

目前市面上可用的可视化库众多，例如 ECharts、Highcharts、AntV 系列、D3，以及本文的主角 GoJS 等。

若按可自定义绘图的程度进行排序：

GoJS、D3.js > AntV > ECharts、Highcharts

如果您的需求较为简单，无需对图元素进行高度自定义，那么可以根据演示效果在 ECharts 或 Highcharts 中选择其中一个库。

如果有一定的自定义图元素需求，可以查看 AntV 的 G2/G6 演示是否满足要求，它们允许对大部分图元素进行自定义。

若上述库无法完全满足需求，则需考虑高可定制性的 D3.js 或 GoJS。建议先查看相关演示，选择最接近您需求的库进行开发。

总结：GoJS 的高可定制性使其非常适合处理复杂的图表交互需求。

4. GoJS 上手指南

查看案例：samples

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

关键概念

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

1. 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>

1. GoJS 简介

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

    // 节点模板描述了如何构造每个节点
    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
        $(go.TextBlock, new go.Binding("text", "key"))
    );

1. GoJS 简介

更多：指南、api

5. 小技巧（非常实用哦）

去除水印，图表绘制出来后默认左上角有库信息的水印。

库源码搜索 7eba17a4ca3b1a8346，找到该位置：

a.yr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Kk,4,4);

注释或删除代码，改为如下：

a.yr=function () {return true;};

ES6 导入 GoJS：参考 loadingGojs

因为上面要去除水印，所以必须下载库源码，并且现在前端项目基本都是基于 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. 实践：实现节点分组关系可视化交互图

1. GoJS 简介

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

接口数据

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" }
  		]
  	}

参考 GoJS demo：grouping、 navigation

最后

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

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

非常感谢！！！

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

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28