介绍
ng2googlecharts 是一个 Angular 组件库，用于在 Angular 应用程序中快速和方便地集成 Google Charts。Google Charts 为开发人员提供了创建、定制和呈现各种图表和可视化数据的工具，而 ng2googlecharts 则为将这些图表和可视化数据嵌入到 Angular 应用中提供了良好的封装和支持。
在本教程中，我们将学习如何安装和使用 ng2googlecharts。我们将通过一些示例代码演示如何使用各种 Google Charts，以及如何自定义这些图表以满足应用程序的需求。
安装
要安装 ng2googlecharts，首先需要安装 Angular CLI，如果已经安装了 Angular CLI，可以跳过这一步。在安装 Angular CLI 前，需要确保已安装 Node.js 和 NPM。安装完成后，可以使用命令行界面运行以下命令：
npm install -g @angular/cli
接下来，在你的 Angular 项目中安装 ng2googlecharts。在你的项目目录中，可以运行以下命令：
npm install ng2googlecharts --save
安装完成后，可以打开项目中 src/app/app.module.ts 文件，并将 Ng2GoogleChartsModule 导入到该文件中：
-- -------------------- ---- -------
------ - --------------------- - ---- ------------------
-----------
------------- -
-- ---
--
-------- -
--------------
----------------------
-- ---
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，ng2googlecharts 已经成功安装。接下来，让我们看看如何使用它来显示各种 Google Charts。
使用
在使用 ng2googlecharts 之前，需要先了解一些基本概念。Google Charts 是一个通过加载和解析 JSON 数据来创建图表的库。为了创建一个图表，需要定义一些必要的配置选项，并提供数据（如表格或 HTML 表格）。这些选项和数据被合并到一个 JSON 对象中，并传递给 Google Charts 软件包来呈现所需的图表。
示例 #1：使用 ComboChart 显示柱状图和线条图
首先，让我们通过一个示例了解如何使用 ng2googlecharts 来绘制一个基本的 ComboChart。下面是一些用于创建 ComboChart 的基本选项：
-- -------------------- ---- ------- ------ ------------- --- - - ------ ------ -- ------- ----------- ------- ------- - -- - ----- ------ - - -- ------ --------- - - --------- -------- ------------ ----------- ----- ----- ------------ ----- ----- --------- ---- ------ --------- ----- ----- ------- ----- ----- -------- ----- ----- -------- ----- ----- ---------- ----- ----- ------------- ----- ----- ----------- ----- ----- ------------ ----- ----- ------------ ----- ---- --
在这个选项中，我们定义了一个条形图（"seriesType": "bar"），其中第二个系列是一条曲线（"series": { 1: { type: 'line' } }）。我们还定义了一些图表的标题等属性。
接下来，我们需要在组件中定义一个方法来生成 ComboChart：
-- -------------------- ---- ------- ------ ---------------- ---- - ----- ----- - --- --------------------------------------------------------------------------- ------------------------------- ------------------- - ------- --------------- --- - ----- ---- - ------------------------------------------------------ ------ ----- -
在这个方法中，我们创建了一个 ComboChart 实例，并传递了一个用于渲染图表的 HTML 元素。然后我们调用 getChartData 方法来生成 ChartWrapper 的数据输出。
最后，我们可以在 template 中添加一个按钮来调用 generateChart 方法，并在元素中指定要显示图表的容器：
<h2>{{ chartOptions.title }}</h2>
<div id="chartContainer"></div>
<button (click)="generateChart()">Create Chart</button>现在，当用户单击“Create Chart”按钮时，我们将呈现一个 ComboChart，它将显示每个月的销售额和支出。
示例 #2：使用 LineChart 显示多条线比较
现在，让我们看看如何使用 ng2googlecharts 在一个图表中显示多个线条。下面是一些用于创建 LineChart 的基本选项：
-- -------------------- ---- ------- ------ ------------- --- - - ------ ------ -------- ------ - ------ ------ -- ------ - ------ ------ ---- -- ------- - --------- ----- - -- ------ --------- - - -------- ------ -------- ------------- -------- ---- ---- ----- -------- ---- ---- ----- -------- ---- ---- ----- -------- ---- ---- ----- -------- ---- ---- ----- -------- ---- ---- ----- -------- ---- ----- ------ -------- ---- ----- ------ -------- ---- ----- ------ -------- ----- ----- ------ -------- ----- ----- ------ -------- ----- ----- ------ -------- ----- ----- ----- --
在这个选项中，我们定义了一个带有不同系列的 LineChart。我们还定义了一些图表的标题等属性。
和之前一样，在组件中创建一个方法来生成 LineChart：
-- -------------------- ---- ------- ------ ---------------- ---- - ----- ----- - --- -------------------------------------------------------------------------- ------------------------------- ------------------- - ------- --------------- --- - ----- ---- - ------------------------------------------------------ ------ ----- -
最后，我们可以在 template 中添加一个按钮来调用 generateChart 方法，并在元素中指定要显示图表的容器：
<h2>{{ chartOptions.title }}</h2>
<div id="chartContainer"></div>
<button (click)="generateChart()">Create Chart</button>现在，当用户单击“Create Chart”按钮时，我们将在一个图表中显示多个股票的价格历史记录。
示例 #3：使用地图显示数据分布
最后，让我们看看如何使用 ng2googlecharts 在地图上显示数据分布。下面是一些用于创建 Map 的基本选项：
-- -------------------- ---- ------- ------ ------------- --- - - ------- ----- ------------ ---------- ---------- - ------- ----------- ---------- - -- ------ --------- - - -------- -------------- ----- ---- ------ --------- ----- --------- --------- ----------- --------- ----------- --------- ----------- --------- ---------------- --------- ----- --------- --------- ----- ------- --------- ---------- --------- ----- ------ -------- ---------- -------- ---------------- -------- ------ ------- -------- ------------ -------- ----- ----------- -------- ------------- -------- ---------------- -------- ----------- -------- ---------- -------- ------------ ---- -------- ---------- -------- ------------- -------- ---- ------ -------- ----------- -------- ----------- -------- ------------ -------- ---------- ------ -------- ----- ------- -------- -------------- -------- ------------- -------- ------------- -------- --------------- -------- ---------- -------- ---------- -------- -------------- -------- -------- -------- ----------- ------- --
在这个选项中，我们定义了一个具有不同颜色的标记的地图。我们还定义了一些地图的标题等属性。
和之前一样，在组件中创建一个方法来生成 Map：
-- -------------------- ---- ------- ------ ---------------- ---- - ----- ----- - --- ------------------------------------------------------------------------- ------------------------------- ------------------- - ------- --------------- --- - ----- ---- - ------------------------------------------------------ ------ ----- -
最后，我们可以在 template 中添加一个按钮来调用 generateChart 方法，并在元素中指定要显示图表的容器：
<h2>{{ chartOptions.title }}</h2>
<div id="chartContainer"></div>
<button (click)="generateChart()">Create Chart</button>现在，当用户单击“Create Chart”按钮时，我们将显示一个地图，它将显示在不同城市中的人口分布。
结论
在本文中，我们了解了如何使用 npm 包 ng2googlecharts 来轻松集成 Google Charts 到 Angular 应用程序中。我们学习了如何创建各种图表和可视化效果，并学习了如何自定义这些图表以满足应用程序的需求。我们希望这篇文章能够对想要在 Web 应用程序中显示图表和数据可视化效果的开发人员有所帮助。如果您有任何疑问，请随时在评论中提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da2b0