介绍
ng2-bluezinc 是一个为 Angular 2+ 提供的轻量级数据可视化轮廓库。它通过 D3.js 来提供各种可视化轮廓功能，并且可以方便地与 Angular 2+ 应用程序集成。在此文章中，我们将探讨如何使用 ng2-bluezinc 来创建丰富的数据可视化图表。
安装
使用 npm 进行安装：
npm i ng2-bluezinc --save-dev
用法
导入模块
首先，我们需要在 Angular 2+ 应用程序中导入 ng2-bluezinc 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- - ---- ---------------
-----------
-------- -
--------------
-----------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -重点在于 Ng2BluezincModule，这是 ng2-bluezinc 的主模块，它将提供所有的轮廓功能。
创建轮廓
我们可以使用 bz-chart 指令来创建基础轮廓。下面是一个简单的柱状图示例：
<div bz-chart type="bar" [data]="data" [options]="options"></div>
首先声明类型 bar，数据使用变量 data，配置选项使用变量 options。
配置选项
options 对象包含用于指定轮廓样式、轴、工具提示等的属性。下面是一个简单的配置示例：
-- -------------------- ---- -------
------- - -
------ -
-------- -----
----- ------- --- ------
--
------- -
------ --
------ -
------------ ----
-
--
-
--在这个例子中，设置标题和 Y 轴标尺起始值。
数据
我们可以从一个服务或其他组件获取数据，然后将其绑定到 data 属性上，供图表使用。
-- -------------------- ---- -------
---- - -
------- ------- ------- --------- -------- --------- ----------
--------- -
-
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- -
---------- --- ---- ------
--------- ---- ---- ------
---------- ---- --- ------
--------- ---- ---- ------
---------- ---- ---- ------
---------- ---- --- -----
--
------------ -
---------------------
--------- ---- ---- ----
---------- ---- --- ----
--------- ---- ---- ----
---------- ---- ---- ----
---------- ---- --- ---
--
------------ -
-
-
--示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -------- ---------- ------------- --------------------------
--
--
------ ----- ------------ -
---- - -
------- ------- ------- --------- -------- --------- ----------
--------- -
-
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- -
---------- --- ---- ------
--------- ---- ---- ------
---------- ---- --- ------
--------- ---- ---- ------
---------- ---- ---- ------
---------- ---- --- -----
--
------------ -
---------------------
--------- ---- ---- ----
---------- ---- --- ----
--------- ---- ---- ----
---------- ---- ---- ----
---------- ---- --- ---
--
------------ -
-
-
--
------- - -
------ -
-------- -----
----- ------- --- ------
--
------- -
------ --
------ -
------------ ----
-
--
-
--
-结论
ng2-bluezinc 是一个易于学习和使用的 Angular 2+ 视觉工具库。通过使用这个库，我们可以方便地创建各种丰富的数据可视化图表。此外，ng2-bluezinc 还提供了许多配置选项，它们可以帮助我们定制图表的样式、轴、工具提示等。希望这篇文章能够帮助您了解如何使用它，并带来实际价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de02e