前言
本篇文章主要介绍了如何使用 npm 包 anychart-angular2 来在 Angular2+ 中绘制数据可视化图表。anychart-angular2 是 anychart.js 的一个 Angular2+ 插件，用于加速 Angular2+ 和 anychart.js 之间的集成。
anychart-angular2 简介
anychart-angular2 包含了任意图表库 anychart.js 的 Angular2+ 版本。它包括了一系列的 Angular2+ 组件，用于帮助轻松创建数据可视化图表。
anychart.js 是一个专业的 JavaScript 数据可视化工具。它支持数百种不同的图表类型，提供高质量的渲染效果，支持动画、导入和导出、交互式功能、地图和 GIS 等。
安装和引用
在开始使用 anychart-angular2 之前，您需要确保您已经安装了 Angular CLI。如果没有，请使用以下代码进行安装：
npm install -g @angular/cli
安装完 Angular CLI 后，使用以下代码安装 anychart-angular2：
npm install anychart-angular2 --save
安装完成后，您需要在您所使用的模块中导入 anychart-angular2：
import { AnyChartService } from 'anychart-angular2';配置和使用
anychart-angular2 允许您在 Angular2+ 中轻松地创建数据可视化图表。您可以使用以下代码创建一个基本的折线图：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------------------
------------
--------- ------------
--------- ----- ------------------ -- ------------ -- - --- -
--
------ ----- -------------- -
------------------- --------- ---------------- --
---------- -
----- ---- - -
------- ------
------- -----
------- ------
------- -----
------- -----
------- -----
--
-- ----------
----- ----- - -------------------------
-- ---------- -- - --- -
-------------------------
-- ------
-------------
-
-在这个示例中，我们先创建了一个数据源，然后定义了一个基本的折线图，最后将图表渲染到指定 ID 的 div 中。
API 参考
anychart-angular2 支持所有 anychart.js 的 API。接下来让我们看一个更加复杂的示例。该示例使用一个任意的图表类型（极地图），自定义了标题、重量、颜色和其他一些属性。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------------------
------------
--------- ------------
--------- ----- ------------------ -- ------------ -- - --- -
--
------ ----- -------------- -
------------------- --------- ---------------- --
---------- -
----- ---- - -
------- ------ --- -----
---------- --- -----
---------- --- -----
------------- --- -----
----------- --- -----
---------- --- ----
--
-- --------
----- ----- - ----------------------
-- ----
---------------------- -- --- ---------
-- -------
-------------------------------------------
-- ------
----- ------ - -------------------
-- ---------
----------------------------- ---------- ---------- ---------- ---------- ------------
-- ------
-------------------------
-------------
-
-通过定义 3 个维度来创建了一个极地地图。同时，在这个示例中，我们添加了自定义的标题、重量、颜色和其他一些属性。
总结
本篇文章主要介绍了如何使用 npm 包 anychart-angular2。我们讲解了 anychart-angular2 的用途、安装、引用、配置和使用，特别是关于 anychart-angular2 的 API 参考进行了详细的说明。希望本篇文章能够对您能够在 Angular2+ 中创建数据可视化图表有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563bc81e8991b448e1210