在前端开发中，我们常常需要用到数据可视化，@swimlane/ngx-charts 就是一个非常优秀的数据可视化组件库，它提供了多种图表类型和灵活的配置选项，可以帮助我们快速、方便地实现数据可视化。本文将介绍如何使用 @swimlane/ngx-charts 实现常见的图表类型。
安装和使用
我们可以通过 npm 安装 @swimlane/ngx-charts：
npm install @swimlane/ngx-charts --save
然后在需要使用它的模块中引入 NgxChartsModule：
-- -------------------- ---- -------
------ - --------------- - ---- -----------------------
-----------
------------- -
-- ---
--
-------- -
-- ---
----------------
--
---------- -
-- ---
--
---------- --------------
--
------ ----- --------- - -常见图表类型的使用
柱状图
我们可以使用 NgxChartsModule 暴露出来的 @swimlane/ngx-charts 组件库中的 ngx-charts-bar-vertical 组件来实现柱状图。我们可以通过 ngx-charts-bar-vertical 组件的 view 属性来设置柱状图的大小：
<ngx-charts-bar-vertical [view]="[400, 300]" [results]="data"> </ngx-charts-bar-vertical>
注意，这里的 data 是我们需要展示的数据，需要在组件的 typescript 文件中定义并初始化。
折线图
我们可以使用 NgxChartsModule 暴露出来的 @swimlane/ngx-charts 组件库中的 ngx-charts-line-chart 组件来实现折线图。我们可以通过 ngx-charts-line-chart 组件的 curve 属性来设置折线的形状：
<ngx-charts-line-chart [results]="data" [curve]="curveType"> </ngx-charts-line-chart>
在 typescript 文件中，我们可以定义 curveType 变量来控制折线的形状：
curveType = 'curveCatmullRom';
饼图
我们可以使用 NgxChartsModule 暴露出来的 @swimlane/ngx-charts 组件库中的 ngx-charts-pie-chart 组件来实现饼图。我们需要设置这个组件的 showLabels 和 results 属性：
<ngx-charts-pie-chart [results]="data" [showLabels]="true"> </ngx-charts-pie-chart>
注意，这里的 data 参数需要在 typescript 文件中定义和初始化。
配置选项
除了上面提到的组件属性之外，我们还可以通过配置选项来进一步定制图表的展示效果。在这里我们以折线图为例，介绍一下如何使用配置选项。
我们可以在 typescript 文件中定义 lineChartOptions 变量来配置折线图的展示效果：
lineChartOptions: any = {
colorScheme: {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
},
curve: shape.curveBasis
};在这个配置选项中，我们可以设置折线图的颜色、曲线形状等属性。然后在 html 文件中将 lineChartOptions 属性传递给 ngx-charts-line-chart 组件：
<ngx-charts-line-chart [results]="data" [curve]="lineChartOptions.curve" [colorScheme]="lineChartOptions.colorScheme"> </ngx-charts-line-chart>
示例代码
最后，我们将完整的示例代码分享给大家。
typescript 文件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- ----- - ---- ----------
------------
--------- -----------------
------------ ------------------------------
---------- -------------------------------
--
------ ----- ------------------ ---------- ------ -
------- ------
------ ------
----- ----- - ----- -----
--------- - -----
--------- - -----
-------- - -----
---------- - -----
-------------- - -----
-------------- - -----
---------- - ----------
---------- - -------------
----------- - -
------- ----------- ---------- ---------- ----------
--
-- ---- ----- -------
--------- - ------------------
----------------- --- - -
------------ -
------- ----------- ---------- ---------- ----------
--
------ ----------------
--
------------- -
------------------- - ------- ----- ---
-
---------- -
-
-
html 文件：
-- -------------------- ---- ------- ---- --- --- ------------------------ ------------- ------------------- -------------------------- ---- --- --- ---------------------- ----------------- -------------------------------- --------------------------------------------- ------------------------ ---- -- --- --------------------- ------------------ -------------------- -----------------------
总结
本文介绍了如何使用 @swimlane/ngx-charts 组件库来实现常见的图表类型，并详细介绍了配置选项的用法。希望这篇教程能够对大家在实际开发中使用 ngx-charts 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4dfb5cbfe1ea0611375