在前端开发中，使用图表可以让数据更加直观和易于理解。而对于 Angular 开发者来说，ng2charts 这个 npm 包提供了一个快速且高度可定制的解决方案，用于创建各种图表，包括折线图、柱状图、饼图等等。
本文将详细介绍如何使用 ng2charts npm 包来创建交互性、可自定义的 Angular 图表，并提供代码示例和技巧。
步骤一：安装 ng2charts 包
在项目中使用 ng2charts，需要先使用 npm 进行安装。
npm i ng2-charts chart.js
因为 ng2charts 需要依赖于 chart.js，所以需要一同安装。
步骤二：导入必要的模块
在使用 ng2charts 之前，需要在 app.module.ts 或对应的 Angular 模块中导入必要的模块：
import { ChartsModule } from 'ng2-charts';
@NgModule({
...
imports: [ChartsModule],
...
})
export class AppModule { }步骤三：创建图表组件
创建一个新的组件来承载图表。
ng g c chart
打开 chart.component.html 文件并添加以下内容：
-- -------------------- ---- -------
---- --------------- --------
------- ---------
------------------
----------------------
------------------------
-----------------------
-----------------------------------
---------------------------------------------
------步骤四：加载数据和配置
在 chart.component.ts 文件中添加一个图表配置和数据：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
-- ----- -------
------ ------------ - -
----------------------- ------
----------- ----
--
-- ----- ------
------ ----------- - ----------- ----------- -------- -------- ------ ------- --------
-- ----- ----
------ --------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--
-- ----- ----
------ --------- - -------
------------- - -
---------- --
--------------- ----- ---- -
---------------
-
--------------- ----- ---- -
---------------
-
-这里我们只是简单地提供了某些默认值和数据来了解如何设置和更新。在 chartOptions 中，我们设置了 scaleShowVerticalLines 为 false 来删除图表中的纵向线条。
在 chartData 中，我们提供了两个数据集，显示了前七个月中 Series A 和 Series B 的数据。
步骤五：查看图表
静态图表的创建已基本完成，现在只需要在页面中包含该组件即可。前提是确保您已在 app.module.ts 文件中声明了它。
<app-chart></app-chart>
这是静态图表的表现，如果对数据进行更新，图表将不会自动更新数据。这时需要添加代码来监听事件。
步骤六：更新图表数据并完成
在 chart.component.ts 中添加一些示例代码以演示如何更新 ng2charts 数据：
-- -------------------- ---- -------
------ ------------ ---- -
----- ---------- - ---------------------------- -- -
------ -
----- ------------------- -- -
------ ------------------------ - -----
---
------ -------------
--
---
-------------- - -----------
-现在，将此方法添加到表单中的按钮或 a 标签中。
<button (click)="randomize()">Randomize Data</button>
随着每次单击，数据将被更新。
结论
这是一个入门级别的使用 ng2charts 的教程，可以在几个简单的步骤中建立可定制的基本 Angular 图表。ng2charts 提供了丰富的定制选项，以满足各种不同的用例。通过研究 chart.js 的文档和 ng2charts 包的源代码，您可以掌握高级定制工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afd81e8991b448d8a71