mf-ng2-chart 是一个基于 Angular 2+ 和 Chart.js 的图表组件库。它提供了简洁易用的 API，可以轻松地创建各种类型的图表，包括线图、饼图、柱状图等。本文将详细介绍如何在你的项目中使用 mf-ng2-chart。
安装
要使用 mf-ng2-chart，你需要先确保已经安装好了 Angular 2+。然后可以通过 npm 安装 mf-ng2-chart：
npm install mf-ng2-chart --save
引入
在安装了 mf-ng2-chart 的基础上，你需要在需要使用图表的模块中引入 MfNg2ChartModule。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- - ---- ---------------
-----------
-------- -
----------------
-
--
------ ----- --------- - -如果你只需要使用一些特定类型的图表，你可以只引入对应的模块。比如，如果你只需要使用饼图，可以这样引入：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------- - ---- ---------------
-----------
-------- -
-------------------
-
--
------ ----- --------- - -使用
现在你已经安装并引入了 mf-ng2-chart，可以开始在你的项目中使用它了。其中，最常用的就是<mf-line-chart>和<mf-pie-chart>组件。这里我们以 mf-line-chart 为例讲解如何使用。
<mf-line-chart [data]="data" [options]="options"></mf-line-chart>
上面的代码中，[data]和[options]分别是数据和选项，即 lineChart 需要的输入。
数据（Data）
<mf-line-chart> 支持使用三种形式的数据：数组、对象和函数。
数组形式
如果你只有一个数据系列，可以使用数组形式来传递数据。数组中的每个元素代表一个点。
data = [
{ x: 1, y: 10 },
{ x: 2, y: 20 },
{ x: 3, y: 30 },
{ x: 4, y: 40 },
{ x: 5, y: 50 },
];对象形式
如果你有多个数据系列，则可以使用对象形式来传递数据。每个属性名代表一个系列。
-- -------------------- ---- -------
---- - -
-------- -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
--
-------- -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
--
--函数形式
如果你需要动态生成数据，可以使用函数形式来传递数据。这个函数需要返回一个数组或对象。
-- -------------------- ---- -------
--------- -
------ -
- -- -- -- ------------- - --- --
- -- -- -- ------------- - --- --
- -- -- -- ------------- - --- --
- -- -- -- ------------- - --- --
- -- -- -- ------------- - --- --
--
-
---- - ------------------------选项（Options）
<mf-line-chart> 对选项的定义和 Chart.js 的定义一样。你可以通过设置选项来更改图表的样式和行为。
-- -------------------- ---- -------
------- - -
----------- -----
-------------------- ------
------- -
------ --
----- ---------
--------- ---------
------ -
------------ ----
-
---
------ --
----- ---------
--------- -------
------ -
------------ ----
-
--
-
--示例
这里提供一个示例代码，它演示了如何在一个组件中使用 <mf-line-chart> 和 <mf-pie-chart>。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -----------
--------- -
-------- ----------
-------------- ------------- ------------------------------------
------- ----------
------------- -------------- ------------------------------------
--
--
------ ----- ------------ -
----- --------- - -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
--
------ --------- - -
- ----- ------- --- ------ -- --
- ----- ------- --- ------ -- --
- ----- ------- --- ------ -- --
- ----- ------- --- ------ -- --
- ----- ------- --- ------ -- --
--
------- - -
----------- -----
-------------------- ------
------- -
------ --
----- ---------
--------- ---------
------ -
------------ ----
-
---
------ --
----- ---------
--------- -------
------ -
------------ ----
-
--
-
--
-------- - -
----------- -----
-------------------- ------
--
-总结
mf-ng2-chart 是一个出色的图表库，为 Angular 2+ 开发者提供了非常方便和灵活的 API，可以很容易地创建各种类型的图表。希望这篇文章能够帮助你更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f471d8e776d08040fe8