介绍
ng2-ring-chart是一个Angular2+的环形图表组件，使用简单，可定制性强，在web应用中使用广泛。
安装
在项目根目录下使用npm安装：
npm install ng2-ring-chart --save
使用
在module文件中导入Ng2RingChartModule：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------
-----------
------------- -
------------
--
-------- -
--------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件文件中导入Ng2RingChartComponent：
-- -------------------- ---- -------
------ - --------------------- - ---- -----------------
------------
--------- -----------
--------- ---------------- --------------------------------
--
------ ----- ------------ -
---- - -
- ------ ---- ------ ---------- ---------- ---------- ------ ----- --
- ------ ---- ------ ---------- ---------- ---------- ------ ------- --
- ------ ---- ------ ---------- ---------- ---------- ------ -------- -
--
-API
data: ChartData[]：图表数据，一个对象数组，每个对象包含以下属性：value: number：数值color: string：颜色，可以使用CSS颜色或十六进制颜色值highlight: string：高亮时的颜色，同上label: string：标签，用于图例
示例代码
-- -------------------- ---- -------
------ - --------------------- - ---- -----------------
------------
--------- -----------
--------- ---------------- --------------------------------
--
------ ----- ------------ -
---- - -
- ------ ---- ------ ---------- ---------- ---------- ------ ----- --
- ------ ---- ------ ---------- ---------- ---------- ------ ------- --
- ------ ---- ------ ---------- ---------- ---------- ------ -------- -
--
-结语
ng2-ring-chart是一个易用且性能卓越的环形图表组件，为Angular应用提供了强大的可视化支持。希望本教程可以帮助各位开发者更好地使用该组件，在web应用中展现出色的图表效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005545c81e8991b448d1a7a