简介
@anxorl/ng2-charts 是一个基于 Angular2+ 的图表库。它是基于 Chart.js 开发的，并提供了 Angular 组件，使其在 Angular 项目中的使用变得更加容易。本文将介绍如何使用该包来创建图表。
安装
在使用 @anxorl/ng2-charts 之前，你需要先安装这些依赖库：
chart.jsng2-chartsrxjs
npm install chart.js ng2-charts rxjs --save
安装完后，你需要将 ChartModule 导入到你项目的模块中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- ---------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
使用 @anxorl/ng2-charts 构建图表的基本步骤如下：
- 准备数据
- 创建一个新的图表对象
- 在 HTML 中使用组件
- 配置图表的选项和数据
下面，我们将一步步来演示如何使用这个库。
准备数据
在使用任何图表库时，你首先需要准备数据。这里我们使用一个 line 类型的示例数据：
export const chartData: ChartDataSets[] = [
{ data: [51, 65, 40, 49, 60, 37, 40], label: 'Series A' },
{ data: [28, 48, 19, 86, 27, 90, 27], label: 'Series B' }
];
export const chartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];ChartDataSets 是图表数据的一个接口，它接受一个 data 数组和一个 label 标签。数组中的每个元素将用来绘制一个点。
Label 是一个类型，该类型接收用于标记每个点的标签。
创建图表对象
-- -------------------- ---- ------- ------ ----------------- ------------ - - ----------- ----- -- ------ ---------------- ------- - ------------ ------ -------------- --------- - ------- ------ --------------- - ----- ------ ---------------- - --- ------ -------------- --------------- - ----------
在这个对象中，我们定义了一系列的选项以及所需的数据。其中 lineChartOptions 对象设置了图表的配置项；lineChartLabels 定义了标签；lineChartType 定义了图表的类型（这里是线性图）；lineChartData 则指定了数据。在组件 app.component.ts 中定义了以上代码。
在 HTML 中使用组件
-- -------------------- ---- -------
------- ---------
--------------------------
--------------------------
----------------------------
--------------------------
---------------------------
----------------------------
-
---------这里直接在 app.component.html 中放置一个 canvas 组件即可。在这个组件中，我们会使用基本的 baseChart 指令来传递该组件所需的各种选项数据。
最终的图表效果如下：
总结
在本文中，我们介绍了如何使用 @anxorl/ng2-charts 包来构建图表。虽然本文提供的示例仅包含一个简单的图表，但你可以使用相同的技术来创建更多复杂的图表。
为了更加深入地了解 @anxorl/ng2-charts 的使用，你可以参考其官方文档，其中包含了各种图表类型的示例和概述。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d3f