在 Web 应用程序中，数据可视化是至关重要的。图表是展示数据最常用的方式之一，可以帮助用户更直观地理解和分析数据。在前端开发中，使用现成的图表库可以极大地减少开发量和提升开发效率。本文将介绍一个 Angular 6 中常用的图表库 ngx-charts，详细讲解如何在 Angular 6 中使用 ngx-charts。
ngx-charts 简介
ngx-charts 是一个基于 Angular 和 d3.js 的图表库，提供了多种常见的图表类型，包括柱形图、折线图、饼状图、热力图等。其中柱形图和折线图支持多种堆叠、分组和组合的样式，同时兼容响应式布局，可以适配不同的设备、屏幕大小。
ngx-charts 的使用非常简单，只需要在 Angular 6 项目中安装 ngx-charts 包，并在组件中引入相应的模块即可。同时 ngx-charts 提供了丰富的 API 和选项，可以帮助开发者轻松实现自定义需求和效果。
安装 ngx-charts
在 Angular 6 项目中使用 ngx-charts 首先需要安装 ngx-charts 包。可以使用 npm 命令进行安装：
npm install @swimlane/ngx-charts --save
之后需要在项目中引入 ngx-charts 中的模块，以使用某一种图表类型。如果需要同时使用多种图表，可以在组件中引入多个模块。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- --------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用 ngx-charts
在引入了 ngx-charts 模块后，便可以在组件中使用 ngx-charts 提供的图表组件了。以柱形图为例，我们可以使用以下代码在组件中展示数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ----------------
--------- -
------------------------
------------- -----
----------------------
----------------
---------------------
-------------------
-------------------
---------------------
---------------------------------
---------------------------------
-------------------------
--------------------------
--------------------------
-
--
------ ----- ----------------- -
----------- - -
------- ----------- ---------- ---------- ----------
--
-------- - -----
---------- - -----
-------------- - -----
---------- - ----------
-------------- - -----
---------- - -------------
---- - -
-
------- ----------
-------- -----
--
-
------- ------
-------- -----
--
-
------- ---------
-------- -----
--
-
------- -----
-------- -----
--
-
------- --------
-------- -----
--
-
------- --------
-------- -----
-
--
--------- - -----
--------- - -----
-在组件中定义了数据 data 和其他配置项，然后在模板中使用 NgxChartsBarVertical 组件，将数据和配置项作为输入属性传递给组件。其中 colorScheme 定义了图表中各个元素的颜色，gradient 控制是否使用渐变颜色，showXAxis 和 showYAxis 控制是否显示横轴和纵轴，showLegend 控制是否显示图例等。
可以看到，使用 ngx-charts 可以非常方便地实现一个柱形图，并且不需要编写复杂的 SVG 代码和样式表。
ngx-charts API
除了提供各种图表组件外，ngx-charts 还提供了丰富的 API 和选项，可以帮助开发者实现更为丰富和复杂的需求。
ngx-charts-bar-vertical API
ngx-charts-bar-vertical 是柱形图组件，提供了以下 API 和选项：
@Input() view: [number, number]: 图表的宽度和高度。@Input() scheme: any: 图表的颜色方案，可以是一个数组或者字符串。@Input() customColors: any: 自定义颜色的对象。@Input() animations: boolean: 是否开启动画效果。@Input() legend: boolean: 是否显示图例。@Input() legendTitle: string: 图例标题。@Input() yAxisTickFormatting: any: 纵轴刻度格式化函数。@Input() xAxisTickFormatting: any: 横轴刻度格式化函数。@Input() yAxisLabel: string: 纵轴标题。@Input() xAxisLabel: string: 横轴标题。@Input() roundDomains: boolean: 是否将纵轴刻度取整。@Input() xAxis: boolean: 是否显示横轴。@Input() yAxis: boolean: 是否显示纵轴。@Input() showGridLines: boolean: 是否显示网格线。@Input() referenceLines: any[]: 参考线的配置数组。@Input() showXAxisLabel: boolean: 是否显示横轴标题。@Input() showYAxisLabel: boolean: 是否显示纵轴标题。@Input() barPadding: number: 柱形之间的间隔。@Input() groupPadding: number: 每组柱形之间的间隔。@Input() roundEdges: boolean: 是否显示圆角柱形。@Input() tooltipDisabled: boolean: 是否禁用提示框。@Input() activeEntries: any[]: 当前选择的元素。@Input() activate: EventEmitter<any>: 当元素被选择时触发的事件。@Input() deactivate: EventEmitter<any>: 当元素被取消选择时触发的事件。@Input() seriesName: any: 图表系列名称。@Input() tooltipText: any: 提示框文本格式化函数。@Input() tooltipPosition: any: 提示框出现的位置。@Output() select: EventEmitter<any>: 当元素被选择时触发的事件。@Output() click: EventEmitter<any>: 当元素被点击时触发的事件。
ngx-charts-pie-chart API
ngx-charts-pie-chart 是饼状图组件，提供了以下 API 和选项：
@Input() view: [number, number]: 图表的宽度和高度。@Input() colorScheme: any: 图表的颜色方案，可以是一个数组或者字符串。@Input() customColors: any: 自定义颜色的对象。@Input() animations: boolean: 是否开启动画效果。@Input() legend: boolean: 是否显示图例。@Input() legendTitle: string: 图例标题。@Input() tooltipDisabled: boolean: 是否禁用提示框。@Input() tooltipText: any: 提示框文本格式化函数。@Input() explodeSlices: boolean: 是否开启扇形区域移开效果。@Input() doughnut: boolean: 是否显示甜甜圈效果。@Input() arcWidth: number: 扇形区域宽度。@Input() labels: boolean: 是否显示标签。@Input() maxLabelLength: number: 标签最大长度。@Input() tooltipPosition: any: 提示框出现的位置。@Input() activeEntries: [PieChartData]: 当前选择的元素。
ngx-charts-line-chart API
ngx-charts-line-chart 是折线图组件，提供了以下 API 和选项：
@Input() view: [number, number]: 图表的宽度和高度。@Input() colorScheme: any: 图表的颜色方案，可以是一个数组或者字符串。@Input() customColors: any: 自定义颜色的对象。@Input() animations: boolean: 是否开启动画效果。@Input() legend: boolean: 是否显示图例。@Input() legendTitle: string: 图例标题。@Input() xAxisLabel: string: 横轴标题。@Input() yAxisLabel: string: 纵轴标题。@Input() yAxisTickFormatting: any: 纵轴刻度格式化函数。@Input() xAxisTickFormatting: any: 横轴刻度格式化函数。@Input() roundDomains: boolean: 是否将纵轴刻度取整。@Input() xScaleMin: any: 横轴最小值。@Input() xScaleMax: any: 横轴最大值。@Input() showXAxis: boolean: 是否显示横轴。@Input() showYAxis: boolean: 是否显示纵轴。@Input() timeline: boolean: 是否显示时间线。@Input() autoScale: boolean: 是否自动根据数据调整纵轴刻度范围。@Input() curve: any: 折线的曲线类型。@Input() lineChartData: ChartData[]: 折线数据数组。@Input() showGridLines: boolean: 是否显示网格线。@Input() gradient: boolean: 是否使用渐变颜色。@Input() tooltipDisabled: boolean: 是否禁用提示框。@Input() activeEntries: any[]: 当前选择的元素。@Input() lineChartLegendColors: any: 图例的颜色数组。@Input() lineChartLegend: boolean: 是否显示图例。@Input() lineWidth: number: 折线宽度。@Output() select: EventEmitter<any>: 当元素被选择时触发的事件。@Output() activate: EventEmitter<any>: 当元素被选择时触发的事件。@Output() deactivate: EventEmitter<any>: 当元素被取消选择时触发的事件。
总结
本文介绍了 Angular 6 中常用的图表库 ngx-charts，详细讲解了如何在 Angular 6 中使用 ngx-charts 展示数据，并介绍了 ngx-charts 提供的各种 API 和选项。ngx-charts 的使用非常简单，可以减少 Web 应用程序开发量和提高开发效率，同时也可以实现丰富的需求和效果。因此，推荐 Web 应用程序开发者在开发过程中使用 ngx-charts，提升 Web 应用程序的数据可视化能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4111b48841e989407f724