在 Angular 开发中，经常有需要使用可视化工具的情况，ng2-vis-forked 即为一款基于 Vis.js 的开源可视化工具，并且提供了 Angular 组件的封装。本文将以实例为主，详细介绍如何使用 ng2-vis-forked 进行数据可视化。
步骤一：安装
首先，我们需要安装 ng2-vis-forked，可以使用 npm 或 yarn 进行安装：
npm install ng2-vis-forked --save
yarn add ng2-vis-forked
步骤二：引入模块
在需要使用 ng2-vis-forked 的模块中引入 VisModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------- - ---- -----------------
-----------
-------- -
---------
--
--
------ ----- --------- - -此时，我们已经引入 ng2-vis-forked 所需的模块。
步骤三：使用组件
在组件中，我们需要定义 Vis 这个对象以及我们需要的数据，为了简化示例，这里我们只展示较为基础的数据示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ----- ------------------------- -----------------------------------------
--
------ ----- ------------ -
------ ----------- ----
------ --------------- ----
------------- -
--------------- - ---
------------------- - -
------ -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- -
--
------ -
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - -
-
--
-
-上文中的代码中，我们实例化了 visNetwork 和 visNetworkData，并在模版中使用相应的指令与变量映射。需要注意的是，visNetwork 和 visNetworkData 是从 Vis.js 的文档中得到的。
步骤四：定义选项和事件
ng2-vis-forked 提供了许多选项，可以让数据可视化更加灵活多样化。在本例中，我们使用 options 和 events 的方式来演示基本的交互。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ----- ------------------------- --------------------------------- --------------------------------------- ---------------------------------------------
--
------ ----- ------------ -
------ ----------- ----
------ --------------- ----
------ ------------------ ----
------ ----------------- ----
------------- -
--------------- - ---
------------------- - -
------ -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- -
--
------ -
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - -
-
--
---------------------- - -
------- -
------------- -----
--
------ -
------ ---------
--
------------ -
---------- -----
--------- -----
--------- ----
-
--
--------------------- - -
------ --------------------------
--
-
----------------- ---- -
---------------------- --------------
-
-上述代码中，我们展示了怎么去使用选项和事件。这里要注意的是，当事件被触发时，需要通过 bind 来绑定 this。
步骤五：运行起来
现在，我们已经完成了基本的数据可视化操作。在运行 Angular 应用之后，我们可以看到如下效果：
总结
ng2-vis-forked 是一款基于 Vis.js 的可视化工具，并且提供了 Angular 组件的封装。我们可以使用它来进行数据可视化，并通过 options 和 events 定义基本的交互。希望这篇文章可以帮助大家更好地了解如何使用 ng2-vis-forked。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc4ff