引言
随着互联网的快速发展，数据成为一种不可或缺的资源。各种数据可视化组件和解决方案层出不穷，其中最常用的便是图表组件。在前端领域，图表组件是必备的技术之一，它可以让我们更直观、更清晰地诠释数据，帮助我们更好地进行决策和分析。
本文将介绍一款非常优秀的图表组件 npm 包——essence-ng2-chart。这个 npm 包是基于 Angular2 开发的，提供了多种图表可供选择。本文将详细介绍其使用方法，并给出一些示例代码，希望对大家在前端数据可视化方面提供一些帮助。
安装与使用
要使用 essence-ng2-chart，首先需要安装它。可以在终端窗口中使用以下命令进行安装：
npm install essence-ng2-chart --save
安装完毕后，在你的代码中引入：
import { Ng2ChartsModule } from 'essence-ng2-chart';
之后，在你的 Angular2 项目中，将这个模块添加到 imports 数组中即可开始使用。
以柱状图为例，在你的 HTML 文件中加入：
<canvas baseChart width="400" height="400" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
在你的 TypeScript 文件中，初始化以下属性就可以开始运行柱状图：
-- -------------------- ---- ------- ------ ------------------- - - ------- - ------ -- ------ - ---------------- - -- - -- ------ ----------------------- - -------- ------- ------- ------- ------- ------- -------- ------ ------------------- - ------ ------ ---------------------- - ----- ------ ------------------ - - ------ ---- --- --- --- --- --- ---- ------ ------- ---- ------ ---- --- --- --- --- --- ---- ------ ------- ---- --展开代码
图表类型
essence-ng2-chart 支持以下图表类型：
- 线图（line）
- 柱状图（bar）
- 饼图（pie）
- 极地图（polarArea）
- 面积图（doughnut）
图表属性
essence-ng2-chart 各种图表都拥有一些特有的属性。下面以 line 图表为例进行介绍。
options
options 是上传一个指令，表示图表的各种设置选项。例如，你可以控制 x 轴和 y 轴标签、legend 和 tooltip。
responsive
当值为 true 时，图表会自适应图表容器大小。默认为 true。
legend
如果设置为 true，图表会显示 legend。默认为 true。
colors
上传一个数组，并控制线条颜色。
chartType
上传一个字符串，表示图表的类型。在本例中是 'line'。
labels
上传一个包含了 x 轴标签的字符串数组。
datasets
上传一个数组，并包含了输出图表数据。在本例中，它应该是一个用数组表示包含了对象的数组。
示例代码
下面是一个 full sample 的代码示例，可以用来展示这个 npm 包的效果：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- --------- --------- - ---- --------------- ------- ------- --------- -------------------------- -------------------------- ---------------------------- -------------------------- -------------------------- --------------------------- ---------------------------- -------------------------------- ------ - -- ------ ----- ------------ - -- ---- ----- ------ ------------------------ - - ------ ---- --- --- --- --- --- ---- ------ ------- ---- ------ ---- --- --- --- --- --- ---- ------ ------- ---- ------ ---- --- --- -- ---- --- ---- ------ ------- --- -- ------ -------------------------- - ----------- ----------- -------- -------- ------ ------- -------- ------ -------------------- - - ----------- ---- -- ------ -------------------------- - - - -- ---- ---- ---------------- -------------------- ------------ ------------------ --------------------- ------------------ ----------------- ------- -------------------------- ------- ---------------------- ----------------------- -- - -- ---- ---------------- -------------------- ------------ ------------------ --------------------- ------------------ ----------------- ------- -------------------------- ------- ---------------------- ------------------ -- - -- ---- ---------------- -------------------- ------------ ------------------ --------------------- ------------------ ----------------- ------- -------------------------- ------- ---------------------- ------------------ - -- ------ ----------------------- - ----- ------ -------------------- - ------- ------ --------------------------- - --- ------ ---------------- - --- ------------------------- - --- --------------------------------- --- ---- - - -- - - -------------------------- ---- - ----------------- - ------ --- ----------------------------------------- ------ ----------------------------- --- ---- - - -- - - ---------------------------------- ---- - ------------------------- - ------------------------- - ---- - --- - - ------------------ - --------------- - ------ ------------------------ - --------------- - ------ ------------------------ - --------------- - -展开代码
结论
essence-ng2-chart 是一个非常不错的图表组件 npm 包，它的使用方法简单易懂，提供了多样化的图表选项。无论是初学者还是资深工程师，都可以从 essence-ng2-chart 中找到自己所需的图表类型。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565e381e8991b448e1dfc
