ngx-graphs 是一个基于 Angular 的图表库，该库简单易用，同时功能丰富。在本文中，我们将学习如何使用 ngx-graphs 构建图表，并探讨一些常见的使用场景。
安装
安装 ngx-graphs 是很容易的，只需执行以下命令：
npm install ngx-graphs --save
基本用法
首先，我们将创建一个简单的应用程序。假设您已经创建了一个名为 ngx-graphs-demo 的 Angular 项目，并且您已经将 ngx-graphs 安装为依赖项。
接下来，我们将向 AppModule 中添加 NgxGraphsModule，这样就可以在整个应用程序中使用 ngx-graphs 组件了：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------------- - ---- -------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，我们可以在 app.component.html 中添加 ngx-graphs 组件：
<div [ngxLineChart]="data"></div>
其中，data 是一个对象数组，表示要显示的数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------------------------
-
--
------ ----- ------------ -
------ ---- - -
--- ------ -- ----
--- ------ -- ----
--- ------ -- ----
--- ------ -- ----
--- ------ -- ----
--- ------ -- ----
--
-这将创建一个简单的折线图，如下所示：
更多示例代码请参阅官方文档：https://github.com/Swimlane/ngx-charts
常见用例
在本节中，我们将探讨一些常见的使用场景，并提供一些示例代码。
饼图
饼图是一种常见的数据可视化图表，用于显示不同数据分类之间的相对比例。
<div [ngxPieChart]="data"></div>
其中，data 是一个包含分类名称和值的对象数组。例如：
public data = [
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40},
];这将创建一个简单的饼图，如下所示：
柱状图
柱状图是一种常见的图表类型，主要用于比较不同数据集之间的差异。
<div [ngxBarVerticalChart]="data"></div>
其中，data 是一个包含分类名称和值的对象数组。例如：
public data = [
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40},
];这将创建一个简单的柱状图，如下所示：
散点图
散点图是一种常见的图表类型，主要用于显示两个变量之间的关系。
<div [ngxScatterChart]="data"></div>
其中，data 是一个包含 x,y 坐标值的对象数组。例如：
public data = [
{x: 10, y: 20},
{x: 15, y: 25},
{x: 20, y: 30},
{x: 25, y: 35},
{x: 30, y: 40},
];这将创建一个简单的散点图，如下所示：
总结
在本文中，我们学习了如何使用 ngx-graphs 构建图表，并探讨了一些常见的使用场景。请记住，ngx-graphs 是一个功能强大且易于使用的图表库，您可以在仅几行代码的情况下快速构建出令人印象深刻的可视化结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681681e8991b448e439d