Angular 是一种基于 TypeScript 的 Web 应用程序框架,用于构建动态 Web 应用程序。Angular 不仅提供了强大的模块化、依赖注入和组件化等特性,还包含了丰富的可复用工具和库。本文将介绍如何使用 Angular 和一些广泛使用的图表库绘制图表,让你的 Web 应用程序更加丰富和可视化。
安装 Angular
首先,在安装和使用 Angular 之前,你需要确保你的计算机上已安装了 Node.js。Node.js 是一个开源、跨平台的 JavaScript 运行环境,可用于编写服务器端 JavaScript 应用程序和 Web 应用程序的构建。打开终端或命令行提示符,检查 Node.js 是否已正确安装。
node -v
如果输出 Node.js 的版本号,则表示已正常安装。
接下来,你需要使用 npm(Node Package Manager)安装 Angular CLI(命令行界面)。Angular CLI 是一个用于创建、构建、测试和部署 Angular 应用程序的工具。
npm install -g @angular/cli
这条命令将全局安装 Angular CLI。安装完成后,你可以使用以下命令创建一个新的 Angular 应用程序:
ng new my-app
这个命令会在当前目录下创建一个名为 my-app 的新应用程序。安装完成后,进入应用程序目录并启动开发服务器。
cd my-app ng serve --open
这个命令将启动开发服务器并打开浏览器窗口,访问 http://localhost:4200/
,你将看到一个欢迎页面,表示安装和启动成功了。
添加图表库
既然你已经成功创建了 Angular 应用程序,下一步是添加一个适用于 Angular 的图表库。本文使用的图表库是 ngx-charts。ngx-charts 是一个基于 D3.js 的 Angular 图表库,提供多种图表类型,包括柱状图、折线图、散点图、饼图等。
首先,你需要使用 npm 安装 ngx-charts。
npm install @swimlane/ngx-charts --save
这个命令将 ngx-charts 添加到你的项目依赖中,并将包保存到 node_modules
目录下。
然后,你需要在 Angular 应用程序中导入所需的库。打开 src/app/app.module.ts
文件,并添加以下代码:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------------- - ---- --------------------------------------- ------ - --------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- ------------------------ --------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -
这个代码将导入 @swimlane/ngx-charts
中的 NgxChartsModule,并将其添加到 app.module.ts 文件中的 imports 数组中。请注意,你还需要将 BrowserAnimationsModule 导入到 app.module.ts 中,以便 ngx-charts 中的动画效果可用。
绘制柱状图
现在,让我们来绘制第一个图表,一个简单的柱状图。首先,在 src/app
中创建一个名为 bar-chart.component.ts 的新组件,并添加以下代码。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ---------------- --------- - ------------------------ ------------- ---------------------- --------------------- --------------- ------------------------ -------------- -------------- ----------------------- ---------------------- ------------------ ----------------------- --------------------- --------------------- ------------------------- ---------------------------- -------------------------- - -- ------ ----- ----------------- ---------- ------ - ----- ----- - ----- ----- --------- - - - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- - -- ----------- - - ------- ----------- ---------- ---------- ---------- -- ---- - ---- ------------- - - ----------- ---- - - --------------- ---- - ------------------- - -
这个代码将创建名为 BarChartComponent 的新组件,并使用 NgxChartsBarVertical 组件绘制一个垂直的柱状图。我们可以看到,在组件中定义了一些属性,包括 view、chartData、colorScheme、yMax 等等。这些属性将用于指定图表的样式和数据。
接下来,在 app.component.ts 中导入 BarChartComponent,并将其添加到 app.component.html 中。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- ---------------------------------- ------------ --------- ----------- --------- - ---- -------------------------- ---- ------- -- -- ----- --- ----- ------ ----- ------- ---------- ------------------------------- ------ -- ---------- ----------------------- -- ------ ----- ------------ - ----- - ------------------ -
这个代码会在应用程序中显示一个简单的柱状图,它将显示在 app.component.html 中。
总结
本文介绍了如何使用 Angular 和 ngx-charts 绘制图表。你已经学会了如何安装 Angular 和 ngx-charts,并使用 ngx-charts-bar-vertical 组件绘制了一个简单的柱状图。希望这篇文章能够帮助你快速入门,并开始在你的应用程序中使用图表。如果你想继续学习,可以探索 ngx-charts 的其他组件和功能,例如折线图、散点图、饼图等等。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/648a73c048841e9894895e04