如何使用 Angular 进行图表绘制

阅读时长 7 分钟读完

Angular 是一种基于 TypeScript 的 Web 应用程序框架,用于构建动态 Web 应用程序。Angular 不仅提供了强大的模块化、依赖注入和组件化等特性,还包含了丰富的可复用工具和库。本文将介绍如何使用 Angular 和一些广泛使用的图表库绘制图表,让你的 Web 应用程序更加丰富和可视化。

安装 Angular

首先,在安装和使用 Angular 之前,你需要确保你的计算机上已安装了 Node.js。Node.js 是一个开源、跨平台的 JavaScript 运行环境,可用于编写服务器端 JavaScript 应用程序和 Web 应用程序的构建。打开终端或命令行提示符,检查 Node.js 是否已正确安装。

如果输出 Node.js 的版本号,则表示已正常安装。

接下来,你需要使用 npm(Node Package Manager)安装 Angular CLI(命令行界面)。Angular CLI 是一个用于创建、构建、测试和部署 Angular 应用程序的工具。

这条命令将全局安装 Angular CLI。安装完成后,你可以使用以下命令创建一个新的 Angular 应用程序:

这个命令会在当前目录下创建一个名为 my-app 的新应用程序。安装完成后,进入应用程序目录并启动开发服务器。

这个命令将启动开发服务器并打开浏览器窗口,访问 http://localhost:4200/,你将看到一个欢迎页面,表示安装和启动成功了。

添加图表库

既然你已经成功创建了 Angular 应用程序,下一步是添加一个适用于 Angular 的图表库。本文使用的图表库是 ngx-charts。ngx-charts 是一个基于 D3.js 的 Angular 图表库,提供多种图表类型,包括柱状图、折线图、散点图、饼图等。

首先,你需要使用 npm 安装 ngx-charts。

这个命令将 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

纠错
反馈