前言
Chart.js 是一个流行的 JavaScript 绘制图表库，但它并不是做得最好的，于是便有了 chartjs-ng2 这个 npm 包。该包将 Chart.js 库封装成 Angular2 组件，使其更方便使用。本篇文章将详细介绍如何在 Angular2 中使用 chartjs-ng2。
准备
chartjs-ng2 包需要一些前置的安装和配置工作，请确保以下环境已安装并配置好：
- Node.js
- NPM
- Angular2
安装
安装 chartjs-ng2 包：
npm install chartjs-ng2 --save
该命令将自动下载并保存 chartjs-ng2 npm 包到你的项目目录中，并将其添加到项目的包依赖中。
创建图表
在 Angular2 中，我们需要使用一个组件来展现图表，因此需要创建一个新的组件来承载它。首先，需引入 chartjs-ng2：
import { ChartComponent } from 'chartjs-ng2';接下来，在组件的 HTML 文件中添加以下代码，创建图表容器：
<chart [type]="chartType" [data]="chartData" [options]="chartOptions"></chart>
这里，我们将 chartType、chartData、chartOptions 三个属性分别绑定至组件的属性中，分别表示图表类型、数据和选项。
接下来，在组件的 TypeScript 文件中，添加以下代码来设定图表选项：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- ------- ------------------ ------------------ ----------------------------------
--
------ ----- ------------ -
-- ----- ----
------ ---------------- - ------
-- ----- ----
------ -------------------- - -
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- --- --- --- ---- ------ ------- ---
--
-- ----- -------
------ ---------------- - -
----------- ----
--
-这里，我们设定了一个简单的柱状图，数据由两个系列构成，用以展示 Series A 和 Series B 的数值。另外我们也将图表的选项 responsive 设为 true，这样它就会针对所在的容器调整大小。
配置选项
chartjs-ng2 提供了一些选项，用于另你定制图表样式和行为。以下是最常用的选项属性：
- animation
- elementSpacing
- fontFamily
- fontSize
- fontStyle
- legend
- responsive
这里只介绍了少部分属性，更多详细的属性可以在官方文档中查找。
示例代码
以下是一个简单的折线图示例代码：
HTML：
<div> <chart [type]="chartType" [data]="chartData" [options]="chartOptions"></chart> </div>
TypeScript：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------
------------
--------- -----------------
--------- ------------ ------------------ ------------------ ----------------------------------------
--
------ ----- ------------------ ---------- ------ -
------- --------- - -------
------- --------- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
----- ---- --- --- --- --- --- ----
----- ------
------------ ---------
--
-
------ --- ------ ---------
----- ---- --- --- --- --- --- ----
----- ------
------------ ---------
-
-
--
------- ------------ - -
----------- -----
------ -
-------- -----
----- ----- ------
--
------- -
------ --
------ -
------------ ----
-
--
-
--
------------- --
---------- --
-结论
chartjs-ng2 非常适合用于在 Angular2 中创建图表。凭借着其良好的封装性和易用性，以及 Chart.js 的出色绘图性能，我们可以很容易地创建出高质量、具有交互性的图表。当然，如果你在使用时遇到了问题，也不必太担心，chartjs-ng2 官方文档中包含了大量的使用示例及其代码，供你参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ba81e8991b448df02d