ng4-chart 是一个基于 Chart.js 的 Angular4 图表组件库。它提供了一组易于使用的绘制图表的指令和组件，并支持动态更新图表数据、图表切换、导出等高级功能。本篇文章将详细介绍如何使用 ng4-chart 绘制各类图表。
安装
首先，我们需要安装并引入 ng4-chart。
通过 NPM 安装 ng4-chart：
npm install ng4-chart --save
在需要使用的组件中，引入 Ng4ChartModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ----------------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- -------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
Line Chart
下面，我们来绘制一个折线图。
首先，需要在组件中导入 ChartData 和 ChartOptions 接口，并设置数据。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ - ---- ----------------------
------------
--------- -----------
--------- ----- ----- --------------- ------------- ----------------------------
--
------ ----- ------------ -
----- --------- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
----- --- --- -- -- --- --- ----
------------ ---------
-
-
--
-------- ------------ - -
----------- -----
-------------------- -----
--
-通过将 chart 指令应用到 div 标签中，在此 demo 中就会自动产生一个折线图。
Bar Chart
下面，我们来尝试绘制一个柱状图。
与绘制折线图基本一致，只需要对 options 进行对应更改。
-- -------------------- ---- -------
------------
--------- -----------
--------- ----- ----- -------------- ------------- ----------------------------
--
------ ----- ------------ -
----- --------- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
----- --- --- -- -- --- --- ----
---------------- ---------
-
-
--
-------- ------------ - -
----------- -----
-------------------- -----
--
-通过将 type 设置为 "bar"，并将 borderColor 替换为 backgroundColor，就可以实现绘制柱状图。
Pie Chart
下面，我们来尝试绘制一个饼图。
与绘制折线图和柱状图类似，只需要对数据与 options 进行对应更改。
-- -------------------- ---- -------
------------
--------- -----------
--------- ----- ----- -------------- ------------- ----------------------------
--
------ ----- ------------ -
----- --------- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
----- --- --- -- -- --- --- ----
---------------- ----------- ---------- ---------- ---------- ---------- ---------- ----------
-
-
--
-------- ------------ - -
----------- -----
-------------------- -----
--
-通过将 type 设置为 "pie"，并将 borderColor 替换为 backgroundColor，并将数据改为单层的对象，就可以实现绘制饼图。
结语
至此，我们已经学会了如何使用 ng4-chart 绘制折线图、柱状图和饼图。还有更多高级功能等待我们的探索，例如图表样式、数据动态更新、导出等。
ng4-chart 的官网提供了更为详细的 API 文档和示例，感兴趣的读者可以前往 ng4-chart official website 进行深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581b81e8991b448d543d