简介
angular2-nvd3-aot 是一个基于 NVD3 构建的 Angular2 应用程序的图表框架。它提供了快速的图表绘制、交互和动画效果。
本文将为大家介绍如何使用 angular2-nvd3-aot 创建漂亮的图表，包括基础教程和示例代码。
安装
在开始安装之前，请确保您已经安装了 Node.js 和 npm。然后，您可以使用以下命令安装 angular2-nvd3-aot。
npm install angular2-nvd3-aot --save
使用
- 导入
NgxChartsModule到你的@NgModule中，例如：
import { NgxChartsModule } from 'angular2-nvd3-aot';
@NgModule({
imports: [ NgxChartsModule ],
...
})
export class AppModule { }- 创建你的数据结构，例如：
-- -------------------- ---- -------
------ --- ------ - -
-
----- ----------
------ -------
--
-
----- ------
------ -------
--
-
----- ---------
------ -------
-
--- 在你的
HTML模板中使用以下元素来绘制你的图表：
<ngx-charts-pie-chart [results]="single" [view]="[700,400]" [legend]="true" [explodeSlices]="true" ></ngx-charts-pie-chart>
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ --- ------ - -
-
----- ----------
------ -------
--
-
----- ------
------ -------
--
-
----- ---------
------ -------
-
--
------------
--------- -----------
--------- -
---------------------
------------------
------------------
---------------
----------------------
------------------------
-
--
------ ----- ------------ ---------- ------ -
------- ------
---------- -
----------- - -------
-
-绑定和属性的详细描述请参阅 Angular2-nvd3-aot 的文档。
总结
angular2-nvd3-aot 提供了一种快速创建漂亮图表的方法。通过上述的教程和示例代码，相信您已经对 angular2-nvd3-aot 有了一定的了解。通过学习 npm 包，我们可以更快地构建出优秀的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574081e8991b448d4361