1. 简介
ng2-charts 是一个基于 Angular 2+ 的图表库，通过组件的方式提供各类常用的图表，包括折线图、柱状图、饼图等。
2. 安装
在使用 ng2-charts 之前，需要先安装 Chart.js：
npm install chart.js --save
然后再安装 ng2-charts：
npm install ng2-charts --save
3. 集成步骤
3.1 导入模块
在 app.module.ts 中导入 Ng2ChartsModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------------- - ---- ------------- ----------- -------- --------------- ----------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
3.2 使用组件
在组件中使用对应的图表组件，例如使用 line chart，可以在 html 文件中添加以下代码：
<canvas baseChart height="350" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
4. 示例代码
下面是一个简单的示例代码，演示如何使用 ng2-charts 绘制一个柱状图：
4.1 准备数据
先定义柱状图需要展示的数据：
-- -------------------- ---- ------- ------ --------------- - - ----------------------- ------ ----------- ---- -- ------ -------------- - -------- ------- ------- ------- ------- ------- -------- ------ ------------ - ------ ------ -------------- - ----- ------ ------------ - - ------ ---- --- --- --- --- --- ---- ------ ------- ---- ------ ---- --- --- --- --- --- ---- ------ ------- --- --
4.2 在组件中使用
在某个组件的 html 中使用上述数据：
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
4.3 完整代码
完整代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- --------------- -------
------- ---------
-------------------------
-------------------------
---------------------------
-------------------------
------------------------------------
------
-
--
------ ----- ------------ -
------ --------------- - -
----------------------- ------
----------- ----
--
------ -------------- - -------- ------- ------- ------- ------- ------- --------
------ ------------ - ------
------ -------------- - -----
------ ------------ - -
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- --- --- --- ---- ------ ------- ---
--
-5. 总结
使用 ng2-charts，可以快速方便地绘制各类常用的图表，开发者可以通过修改配置项及数据，实现不同的数据可视化效果，提升 Web 应用的用户体验。需要注意，使用 ng2-charts 之前需要安装 Chart.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60936