引言
在前端开发中，我们经常需要使用图表来展示数据。Highcharts 是一个流行的，用于创建交互式图表和图形的 JS 库。而 @rijine/ngx-highcharts 这个 npm 包是一个封装了 Highcharts 的 Angular 组件，使用它可以帮助我们更方便的在 Angular 项目中使用 Highcharts。
安装
使用 npm 进行安装：
npm install @rijine/ngx-highcharts --save
使用
安装完成后，我们需要在 app.module.ts 中引入 Highcharts、HighchartsMore、HighchartsSolidGauge 和 @rijine/ngx-highcharts：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -- ---------- ---- -------------
------ - -- -------------- ---- -----------------------------
------ - -- -------------------- ---- ---------------------------------
------ - ----------- - ---- -------------------------
---------------------------
---------------------------------
-----------
-------- -
--------------
-------------------------------
--
---------- ---------------
--
------ ----- --------- --然后在组件中使用：
<ngx-chart [options]="chartOptions" [update]="updateFlag" (chartInstance)="saveInstance($event)"> </ngx-chart>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -- ---------- ---- -------------
------------
--------- -----------
--------- -
----------
------------------------
---------------------
---------------------------------------
------------
-
--
------ ----- ------------ -
------------- -------------------
---------- - ------
------------- -
----------------- - -
------ -
----- -----
--
------ -
----- ------ ------------
--
------ -
----------- ---------- ---------- ----------
--
------ -
------ -
----- ------ ------
-
--
------- --
----- -------
----- --- -- --
-- -
----- -------
----- --- -- --
--
--
-
--------------------------- ----------------- -
---------------------------
-
-这段代码中，我们创建了一个 bar 类型的图表，包含了两个系列 Jane 和 John，分别表示不同人吃的苹果、香蕉、橙子的数量。chartOptions 中存放着这个图表的所有配置项，它会被传递给 ngx-chart 组件进行渲染。updateFlag 表示是否更新图表，配合 updateFlag = !updateFlag; 可以通过修改数据动态更新图表。saveInstance 函数则是用来保存 chart 实例方便后期操作的。
深度与学习
@rijine/ngx-highcharts 比较全面的封装了 Highcharts 的各个功能，能够帮助我们更方便的创建各种类型的图表。通过学习这个 npm 包，可以让我们更加深入了解 Highcharts 的用法和特性，提高我们的绘图能力和代码灵活性。
指导意义
使用 npm 包 @rijine/ngx-highcharts 可以帮助我们在 Angular 项目中更快速、便捷地创建各种图表。同时，它也是学习 Highcharts 的一个很好的工具。通过阅读官方文档和示例代码，我们能够深入了解 Highcharts 的用法和特性，同时也能够提高我们的代码能力和解决问题的能力。
示例代码
示例代码已在使用章节中展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ca481e8991b448e60f8