1. 简介
ng2-charts 是一个基于 Angular 2+ 的图表库，通过组件的方式提供各类常用的图表，包括折线图、柱状图、饼图等。
2. 安装
在使用 ng2-charts 之前，需要先安装 Chart.js：
--- ------- -------- ------
然后再安装 ng2-charts：
--- ------- ---------- ------
3. 集成步骤
3.1 导入模块
在 app.module.ts 中导入 Ng2ChartsModule 模块：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------------- - ---- ------------- ----------- -------- --------------- ----------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
3.2 使用组件
在组件中使用对应的图表组件，例如使用 line chart，可以在 html 文件中添加以下代码：
------- --------- ------------ -------------------------- -------------------------- ---------------------------- -------------------------- --------------------------- ----------------------------------- ---------------------------------------------
4. 示例代码
下面是一个简单的示例代码，演示如何使用 ng2-charts 绘制一个柱状图：
4.1 准备数据
先定义柱状图需要展示的数据：
------ --------------- - - ----------------------- ------ ----------- ---- -- ------ -------------- - -------- ------- ------- ------- ------- ------- -------- ------ ------------ - ------ ------ -------------- - ----- ------ ------------ - - ------ ---- --- --- --- --- --- ---- ------ ------- ---- ------ ---- --- --- --- --- --- ---- ------ ------- --- --
4.2 在组件中使用
在某个组件的 html 中使用上述数据：
------- --------- ------------------------- ------------------------- --------------------------- ------------------------- ------------------------------------
4.3 完整代码
完整代码如下：
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- --------------- -------
------- ---------
-------------------------
-------------------------
---------------------------
-------------------------
------------------------------------
------
-
--
------ ----- ------------ -
------ --------------- - -
----------------------- ------
----------- ----
--
------ -------------- - -------- ------- ------- ------- ------- ------- --------
------ ------------ - ------
------ -------------- - -----
------ ------------ - -
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- --- --- --- ---- ------ ------- ---
--
-5. 总结
使用 ng2-charts，可以快速方便地绘制各类常用的图表，开发者可以通过修改配置项及数据，实现不同的数据可视化效果，提升 Web 应用的用户体验。需要注意，使用 ng2-charts 之前需要安装 Chart.js。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60936