简介
GoJS 是一个强大的 JavaScript 库,用于创建交互式、可自定义的图表和流程图。GoJS 能够帮助开发者快速、简单地构建可视化界面,是前端开发中非常实用的工具之一。
在本文中,我们将学习如何通过 npm 包来使用 GoJS,并使用几个示例来演示 GoJS 的基本用法。
安装
要使用 GoJS,首先需要安装它。可以通过 npm 包管理器来安装 GoJS:
npm install gojs
基本使用
下面的代码演示了如何使用 GoJS 在 Web 页面上创建简单的流程图:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- --------------- ------- ---------------------------------------------------- ------- ------ ---- ----------------- ------------------- --------------------- -------- --- - - -------------------- --- --------- - ------------- --------------- - -- ------- ---------- -- --- ---------------------- - ---------- ------- ----------- ------------ - ----- ------- --- --------------- - ------- - -- --- ------------------ ------- -- --------------- - --------------------- - -------------- - - ---- ------- -- - ---- ------ - ---- --------- ------- -------
在这个例子中,我们使用了 go.GraphObject.make
来创建 GoJS 对象,然后创建一个 Diagram 对象,并设置它的节点模板和数据模型。
示例代码
以下是几个示例代码,演示了 GoJS 的基本用法。
基本流程图
下面的代码演示了如何使用 GoJS 创建一个简单的流程图:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- --------------- ------- ---------------------------------------------------- ------- ------ ---- ----------------- ------------------- --------------------- -------- --- - - -------------------- --- --------- - ------------- --------------- - ------------------------ ----- ------------------------- ---- ------------------------ -------------- --- ---------------------- - ---------- ------- ----------- ------------ - ----- ------- --- --------------- - ------- - -- --- ------------------ ------- -- ---------------------- - ---------- ------------ ----------- - -------- ---------- -- -- --------------- - --------------------- - -------------- - - ---- ------- -- - ---- ------ -- - ---- ------- -- - ---- ------- - -- -------------- - - ----- -------- --- ------ -- - ----- ------- --- ------- -- - ----- -------- --- ------- - - --- --------- ------- -------
点击事件
下面的代码演示了如何使用 GoJS 添加一个点击事件:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- --------------- ------- ---------------------------------------------------- ------- ------ ---- ----------------- ------------------- --------------------- -------- --- - - -------------------- --- --------- - ------------- --------------- - ------------------------ ----- ------------------------- ---- ------------------------ -------------- --- ---------------------- - ---------- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------