前端数据可视化UI组件图形学【免费下载链接】GoJSJavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.项目地址https://gitcode.com/gh_mirrors/go/GoJS点击查看免费下载GoJS 是一个面向浏览器与 Node 环境的 JavaScript / TypeScript 图表库用于创建和操作流程图、组织结构图、业务图、可视化编辑器等各类交互式图形。本篇指南以本仓库 README.md 为核心骨架结合 learn/intro.html 入门文档、samples/minimal.html 最小示例、package.json 发行配置与 test/nodescript.js 测试脚本带你从安装、核心概念到最小可运行示例完整掌握 GoJS 的建模与渲染思路并快速上手第一个可交互图表。GoJS 是什么一个面向 HTML 图的 JavaScript 库GoJS 由 Northwoods Software 开发是一个用于创建和操作图表diagrams、图形charts与图graphs的 JavaScript / TypeScript 库。它不依赖任何 JavaScript 框架或库可以在任何支持现代 HTML 与 JavaScript 的环境中使用。围绕这一核心定位GoJS 具备以下关键能力均可在本仓库中找到对应资源丰富的图表类型支持仓库内置了大量示例覆盖流程图flowchart.html、组织架构图orgChartEditor.html、BPMN 业务流程、泳道图swimLanes.html、时间线timeline.html、状态图stateChart.html、看板kanban.html、网络图network.html、思维导图mindMap.html、桑基图sankey.html、家族树与遗传图谱familyTree.html、genogram.html、鱼骨图Fishbone.html、UML 类图umlClass.html、决策树decisionTree.html、PERT 图PERT.html、甘特图gantt.html等数百个示例。内置布局算法包括树布局TreeLayout、力导向布局ForceDirectedLayout、圆形布局CircularLayout、分层有向图布局LayeredDigraphLayout以及大量自定义布局扩展见 extensions/ 目录。两种渲染方式既可以渲染到 HTML Canvas 元素并可导出为 SVG 或图片格式也可以直接渲染为 SVG DOM。多运行环境可在 Web 浏览器中运行也可在服务端的 Node.js 或 Puppeteer无头浏览器中运行。模型驱动的数据架构Diagram 由 Model 支撑通常通过 JSON 格式文本进行保存与加载。安装与获取npm 与 gojs-kit本仓库的 package.json 说明了官方 npm 包的发布形态。npm 包本身只包含库本体即release/目录下的核心文件可以使用 npm 安装npm install gojs而示例、扩展与文档的完整源码则可以通过脚手架命令安装npm create gojs-kit该命令会拉取包含所有示例samples/、扩展extensions/ 与 extensionsJSM/以及学习文档learn/的完整开发套件。发行文件说明从 package.json 的main、module、exports、typings、unpkg字段可以看出release/目录提供了多种加载形态文件用途release/go.js常规脚本加载的生产版本UMD浏览器可直接script引入release/go-debug.js开发调试版本包含额外的运行时类型检查与错误检查release/go.mjsECMAScript Module 形式的生产版本release/go-debug.mjsECMAScript Module 形式的调试版本release/go.d.tsTypeScript 类型定义文件release/go-module.js、release/go-debug-module.js模块化加载的兼容入口开发阶段建议使用go-debug.js以获得更完整的运行时错误提示生产环境使用go.js体积与运行效率更优。注意 GoJS 库文件经过压缩处理调试器中看到的单字母/双字母属性名均为内部实现应只使用 api/index.html 中公开文档化的属性与方法。核心概念从 Diagram 到 Model 的对象模型在动手写代码之前需要先建立 GoJS 的层级心智模型。本仓库的 learn/intro.html 对这一对象体系做了系统梳理Diagram图表承载一切的最顶层容器必须托管在一个 HTML Div 元素中。GoJS 会在该 Div 内部创建一个 Canvas 元素负责绘制与接收事件。Part部件图表中的基本组成单元包括Node节点、Link连线与Group分组。Layer图层所有部件被组织在不同的 Layer 中。Layout布局与Router路由负责自动排列部件与计算连线路径。Model模型每个 Diagram 对应一个 Model用于持有并解释应用数据。Model 中的每条数据对象都会自动被实例化为一个 Node 或 Group对于GraphLinksModellinkDataArray中的每条数据会自动生成一条 Link。模板Template与 GraphObject每个 Node / Link 通常由一个模板定义外观与行为模板由Panel面板以及TextBlock文本、Shape形状、Picture图片等 GraphObject 组合而成。数据绑定Binding把 GraphObject 的属性与模型数据属性关联起来使每个节点因数据而不同。Tool工具与 ToolManager处理鼠标、键盘、触摸与手写笔事件。ToolManager 根据当前鼠标事件与状态决定运行哪一个工具选择、拖动、绘制连线等。CommandHandler命令处理器实现 Delete、Copy 等命令并在 ToolManager 运行时解释 Ctrl-Z 之类的键盘事件。UndoManager撤销管理器启用后预定义工具与命令都会自动执行事务Transaction使每个用户操作都可撤销/重做。对 Diagram、GraphObject、Model 或模型数据的所有编程式修改也应放入单个事务中。Adornment装饰用于标示选中状态如节点外围的蓝色矩形框并支撑调整大小、重连连线等工具工具提示tooltip与上下文菜单context menu同样基于 Adornment 实现。Overview总览与 Palette面板Overview让用户总览整个模型并控制 Diagram 的显示范围Palette存放可供用户拖拽到 Diagram 中的部件。AnimationManager动画管理器负责自动布局后及各类命令执行后的自动动画也支持自定义Animation。最小示例实战四行数据一张交互图README 中给出了一段精简但完整的示例代码这也是仓库 samples/minimal.html 所实现的页面。它虽非绝对最小因为自定义了 Node 模板并开启了撤销/重做但足以展示 GoJS 的核心工作流创建 Diagram → 定义模板 → 绑定数据 → 填入模型。完整代码如下可直接保存为一个 HTML 文件运行div idmyDiagramDiv stylewidth:400px; height:200px;/div script srchttps://cdn.jsdelivr.net/npm/gojs/script script const myDiagram new go.Diagram(myDiagramDiv, { // create a Diagram for the HTML Div element undoManager.isEnabled: true // enable undo redo }); // define a simple Node template // the Shape will automatically surround the TextBlock myDiagram.nodeTemplate new go.Node(Auto).add( // add a Shape and a TextBlock to this Auto Panel new go.Shape(RoundedRectangle, { strokeWidth: 0, fill: white }) // no border; default fill is white .bind(fill, color), // Shape.fill is bound to Node.data.color new go.TextBlock({ margin: 8, font: bold 14px sans-serif, stroke: #333 }) // some room around the text .bind(text, key) // TextBlock.text is bound to Node.data.key ); // but use the default Link template, by not setting Diagram.linkTemplate // create the model data that will be represented by Nodes and Links myDiagram.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. 宿主 Div 与库引入Diagram 必须由 HTML Div 托管。GoJS 会往该 Div 中追加一个与 Div 等尺寸的 Canvas 元素用户实际看到并与之交互的就是这个 Canvas。通过script srchttps://cdn.jsdelivr.net/npm/gojs引入库之后全局会得到一个go命名空间对象所有 GoJS 类型如go.Diagram、go.Node、go.Shape都挂在go.前缀之下。2. 创建 Diagram 并启用撤销/重做new go.Diagram(myDiagramDiv, { undoManager.isEnabled: true })第一个参数是宿主 Div 的 id第二个参数是初始化选项对象。这里以undoManager.isEnabled: true这种点路径dot-path形式开启 UndoManager之后用户每次操作拖动、删除、复制等都会自动处于事务中可随时 Ctrl-Z 撤销、Ctrl-Y / Ctrl-Shift-Z 重做。3. 定义 Node 模板Auto 面板 数据绑定myDiagram.nodeTemplate new go.Node(Auto).add( new go.Shape(RoundedRectangle, { strokeWidth: 0, fill: white }) .bind(fill, color), new go.TextBlock({ margin: 8, font: bold 14px sans-serif, stroke: #333 }) .bind(text, key) );这里使用了Auto面板类型Shape会自动包裹住TextBlock形成圆角矩形背景 居中文案的节点外观。两个 GraphObject 的关键属性都通过.bind()与模型数据字段绑定Shape.fill绑定到数据对象的color字段TextBlock.text绑定到数据对象的key字段。由于没有设置Diagram.linkTemplate连线使用 GoJS 内置的默认 Link 模板包括带箭头的黑线样式。4. 模型数据驱动节点与连线GraphLinksModel接收两个数组nodeDataArray四个普通 JavaScript 对象每个对象代表一个节点。除key节点唯一标识与color绑定到填充色外还可以按需添加任意自定义属性linkDataArray连线数据通过from/to字段引用节点key建立连接关系。示例中的{ from: Beta, to: Beta }是一条自环连线。Diagram 会自动为数组中的每条数据创建对应 Node / Link并根据数据属性渲染出图。运行这段代码后你将看到本文开头的截图效果Alpha、Beta、Gamma、Delta 四个彩色节点以及五条带箭头连线含一条自环。5. 开箱即用的交互能力示例页面 samples/minimal.html 明确描述了这段代码运行后的交互能力全部由内置工具与命令自动提供无需编写任何事件代码鼠标点击选择节点或连线选中节点会出现蓝色矩形 Adornment选中连线会有蓝色高亮路径Shift点击 追加选择Ctrl点击Mac 上为 Command切换选中状态在空白处按下并短暂停留后拖拽出矩形框可框选多个部件Ctrl-A 全选拖动节点移动位置Ctrl-C / Ctrl-V 或 Ctrl拖动复制Delete 删除Ctrl-Z 撤销、Ctrl-Y / Ctrl-Shift-Z 重做滚轮上下滚动、Shift滚轮左右滚动、Ctrl滚轮缩放空白处直接拖拽可平移触屏设备上支持手指平移、双指缩放、点按选择、长按呼出上下文菜单默认菜单支持当前选中对象可用的标准命令。模板与数据绑定的底层原理示例中的new go.Shape(RoundedRectangle, {...}).bind(fill, color)可以拆解为两层机制其定义对应本仓库 api/symbols/Binding.html 文档中的Binding类GraphObject 属性系统Shape的fill、TextBlock的text等都是公开的、可绑定的属性。GoJS 通过属性名称字符串完成绑定登记而非依赖框架的响应式系统。Binding 单向/双向模式bind(fill, color)默认建立从数据到图元的单向绑定——当模型数据变化时图元属性自动更新。需要数据随用户操作写回模型时例如拖动后保存节点位置可使用makeTwoWay建立双向绑定参见 test/nodescript.js 中的示例new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify)这意味着 GoJS 应用的持久化策略非常简洁只需要保存与恢复 Model由普通 JavaScript 对象组成的数据数组而不必序列化任何图元对象。Model.toJson()即可输出 JSON 格式的模型文本反向则通过Model.fromJson()恢复。在 Node.js 环境中运行 GoJSGoJS 不仅限于浏览器。仓库的 test/nodescript.js 展示了如何在 Node 环境CommonJS下加载库并驱动 Diagramconst go require(gojs); // npm 安装后以 CommonJS 引入 const $ go.GraphObject.make; // 模板定义的简写工厂方法 const myDiagram $(go.Diagram, , // 无 DOM 环境不传 Div 元素 { viewSize: new go.Size(400, 400), // DOM-less 环境下必须显式指定视口尺寸 layout: $(go.LayeredDigraphLayout) }); myDiagram.nodeTemplate $(go.Node, Auto, { width: 80, height: 40 }, // 无 DOM 时无法测量文本需显式给定节点尺寸 new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, RoundedRectangle, { strokeWidth: 0 }, new go.Binding(fill, color)), $(go.TextBlock, new go.Binding(text, key)) );这段代码揭示了几点 Node 环境的差异不依赖 DOM因此go.Diagram的宿主参数传入空字符串并通过viewSize显式设置视口大小布局默认不自动运行但显式指定layout后InitialLayoutCompleted事件会携带布局结果该测试脚本在布局完成后调用model.toJson()与预期 JSON 进行全等比较并输出test is OK验证了模型与布局的确定性——这正是无头环境Node、Puppeteer中做自动化测试与服务器端渲染的典型模式。版本信息与测试本仓库 package.json 声明当前版本为4.0.0main指向 release/go.jsmodule指向 release/go-module.jstypings指向 release/go.d.tsunpkg指向 release/go.js并提供了完整的exports映射以支持打包工具按环境development / production自动选择调试版或生产版。npm 脚本test执行的就是上文提到的 test/nodescript.js。进一步学习路径从最小示例出发本仓库提供了体系化的进阶资源入门教程learn/intro.html 是本篇内容的完整展开版后续依次阅读 learn/buildingObjects.html构建 GraphObject、learn/usingModels.html模型、learn/dataBinding.html数据绑定、learn/nodes.html节点、learn/links.html连线、learn/layouts.html布局、learn/transactions.html事务与撤销、learn/interactivity.html交互等文档即可覆盖绝大多数开发场景。API 参考api/index.html 与 api/symbols/ 目录下的各类型文档如 Diagram.html、GraphLinksModel.html、Binding.html是查询属性与方法的权威来源。示例源码samples/ 目录提供数百个可直接运行的 HTML 示例basic.html 在最小示例基础上加入了分组、工具提示与自定义上下文菜单。扩展库extensions/可直接 script 加载的 JS与 extensionsJSM/TypeScript 源码及 ES Module 编译产物包含了 80 余个官方扩展例如 FishboneLayout.js、PackedLayout.js、TreeMapLayout.js 等可直接引入复用。平台集成如需接入框架可参考 learn/react.html、learn/angular.html、learn/svelte.html、learn/nodeJs.html 等专题文档。关于使用许可请查阅本仓库的 license.html软件许可与 evaluationLicense.html评估许可。如需在社区获取帮助官方论坛是 GoJS 相关问题最有效的交流渠道发帖前需先完成注册。赞分享前端数据可视化UI组件图形学【免费下载链接】GoJSJavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.项目地址https://gitcode.com/gh_mirrors/go/GoJS点击查看免费下载相关推荐Subgen安全配置最佳实践权限管理、路径映射与网络隔离Subgen安全配置最佳实践权限管理、路径映射与网络隔离 Subgen作为一款基于OpenAI Whisper模型的字幕自动生成工具能够与Jellyfin、如何用GoJS快速创建交互式流程图终极完整教程如何用GoJS快速创建交互式流程图终极完整教程 GoJS是一个强大的JavaScript图表库专门用于创建交互式流程图、组织结构图、设计工具和可视化语言。无前端数据可视化UI组件图形学如何快速掌握GoJS从零构建交互式图表应用的完整指南如何快速掌握GoJS从零构建交互式图表应用的完整指南 GoJS是一款功能强大的JavaScript图表库专为创建交互式流程图、组织结构图、设计工具和可视化语前端数据可视化UI组件图形学上一篇miniblink49 中的 Google Test Xcode 集成指南v8_6_7 测试框架的工程化落地下一篇探索数据的织布机DataLoom——Obsidian的新星插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
