ng-charts 是一个基于 Chart.js 封装的 AngularJS 图表库，可以在 AngularJS 应用程序中方便地绘制出各种图表。其特点是易于使用、配置灵活、支持多种图表类型等，是一个非常实用的前端图表库。
本文将针对初学者，介绍 ng-charts 的使用方法，帮助大家快速上手。
1. 安装 ng-charts
在使用 ng-charts 前，需要事先安装它。可以通过 npm 安装，执行以下命令：
npm install ng-charts --save
安装完成之后，在引入依赖时，需要在 app.module.js 文件中添加一个新的 module 依赖：
angular.module('myApp', ['ng-charts']);2. 使用 ng-charts
2.1. 基本使用
使用 ng-charts 绘制图表非常简单，只需要在 HTML 文件中配置相关的元素即可。例如，下面的代码将绘制一个饼图：
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels"
chart-colors="colors"></canvas>其中，id 为元素的 ID，class 为固定写法 chart chart-图表类型，chart-data 和 chart-labels 是对应的数据和标签，chart-colors 是颜色。
对于柱状图、折线图等其他类型的图表，只需要修改类名即可，例如：
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"
chart-colors="colors"></canvas>2.2. 图表类型
ng-charts 提供多种类型的图表供开发者使用，常见的图表类型有：
- 折线图（chart-line）；
- 柱状图（chart-bar）；
- 饼图（chart-pie）；
- 散点图（chart-scatter）；
- 环形图（chart-doughnut）；
- 雷达图（chart-radar）；
- 极地图（chart-polar-area）。
开发者可以根据需要使用不同的图表类型，只需要在 HTML 中指定对应的类名即可。
2.3. 配置参数
ng-charts 还提供了丰富的参数配置，开发者可以自定义图表的样式、颜色等属性。最常用的配置参数有：
- scaleOverride：是否自定义 Y 轴坐标范围；
- scaleSteps：Y 轴坐标点数目；
- scaleStepWidth：Y 轴坐标点间隔；
- scaleStartValue：Y 轴坐标起始值；
- scaleLineColor：Y 轴线条颜色；
- scaleLineWidth：Y 轴线条宽度；
- datasetFill：是否填充图表区域；
- pointDotRadius：散点大小；
- onAnimationComplete：动画结束后的回调函数。
2.4. 示例代码
下面是一个简单的例子，展示如何使用 ng-charts 绘制柱状图：
-- -------------------- ---- -------
----- ---------------
---- -----------------------------
------- -------- ------------ ----------
----------------- ---------------------
--------------------- ---------------------------------
------
-------
------- -----------------------------------------------------------------------
------- -------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
--- --- - ----------------------- ---------------
------------------------------ ---------------- -
------------- - ----------- ----------- -------- -------- ------ ------- --------
------------- - -------- --- ------- ----
----------- - -
---- --- --- --- --- --- ----
---- --- --- --- --- --- ---
--
------------- - ----------- -----------
-------------- - -
------- - -------- ---- --
------ - -------- ----- ----- ------ ------ -
--
---
---------3. 总结
本文介绍了如何使用 ng-charts 在 AngularJS 应用程序中绘制各种图表。开发者可以根据实际需要选择对应的图表类型，并根据自己的需求进行配置参数。希望本文能够帮助初学者快速了解和使用 ng-charts，提高应用开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8581e8991b448d91bb