什么是 ng4-graph
ng4-graph 是一个基于 Angular4+ 的可视化图表绘制库，它支持各种类型的图表，包括折线图、柱状图、饼图和力导向图等。
安装 ng4-graph
在使用 ng4-graph 之前，你需要先将它从 npm 仓库安装到你的项目中。你可以通过以下命令完成安装：
npm install ng4-graph --save
使用 ng4-graph
安装完成 ng4-graph 后，你需要在你的 Angular 模块中引入它：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ------------ ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ---------------- ---------- -------------- -- ------ ----- --------- --
在你的组件中，你可以使用 ng4-graph 的组件来绘制图表。例如，你可以创建一个简单的折线图：
<ng4-graph type="line" [data]="data"></ng4-graph>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ----------- ----------- ---------------------------
--
------ ----- ------------ -
---- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
----- ------
------------ ----
---------------- -----------------------
------------ ---------------------
--------------- -------
----------- ---
----------------- ----
---------------- --------
----------------- ---------------------
--------------------- -------
----------------- --
----------------- --
-------------------------- ---------------------
---------------------- ----------------------
---------------------- --
------------ --
--------------- ---
----- ---- --- --- --- --- --- ----
--------- -----
-
-
--
-指南
ng4-graph 提供了丰富的 API，你可以通过它来绘制各种类型的图表。下面是一些常用的 API：
type
type 属性指定要绘制的图表类型。你可以设置为：'line'（折线图）、'bar'（柱状图）、'radar'（雷达图）、'pie'（饼图）、'doughnut'（环状图）和 'polarArea'（极地图）。
data
data 属性指定图表的数据。它必须是一个对象，包含 labels 和 datasets 两个属性。
- labels：类型为数组，用于指定 X 轴的标签。
- datasets：类型为数组，每一个元素表示一个数据集。
options
options 属性是一个可选的对象，用于设置图表的各种属性，比如字体大小、线条颜色、动画效果等。具体可以参考 ng4-graph 的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565f481e8991b448e1e5d