在前端开发中，经常需要使用图表来展示数据。Google Charts 是一款非常优秀的图表库，现在已经可以在 Angular2 中使用。本文将介绍如何使用 npm 包 lab-ng2-google-charts 来在 Angular2 中使用 Google Charts。
安装和引入
安装 lab-ng2-google-charts：
npm install lab-ng2-google-charts --save
在你的项目中，你需要引入以下模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartsModule } from 'lab-ng2-google-charts';准备数据
在使用 Google Charts 之前，需要准备好数据。
例如，我们有这样一份数据：
public chartData = [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
];使用指令
接下来，我们需要使用 lab-ng2-google-charts 的指令来在页面中插入图表。有两个指令可供选择：
google-chart：用于创建一个单独的图表。google-chart-wrapper：用于创建多个图表。
单独的图表
我们可以在组件类中使用 ViewChild 来引用单独的图表指令，例如：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------------- - ---- ------------------------
------------
--------- -----------
--------- -------------- ------ ------------------ ------------------------------------
--
------ ----- ------------ -
------ --------- - -
-- ---
--
------------------- ------ ------ ---------------------
-这里我们将 GoogleChartComponent 指令作为 ViewChild 的参数传入。接下来在模板中使用 google-chart 指令，并将数据传递给指令，指定类型为柱状图。最后，我们还将指令的引用保存在组件中。
多个图表
我们可以使用 google-chart-wrapper 指令来创建多个图表。使用 GoogleChartWrapperComponent 指令来引用 google-chart-wrapper 指令，例如：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - --------------------------- - ---- ------------------------
------------
--------- -----------
--------- ---------------------- ------------- ------------------------------------------
--
------ ----- ------------ -
------ ------ - -
-
--- ---------
----- -
-- ---
--
----- --------------
-------- -------- -------- -----------
--
-
--- ---------
----- -
-- ---
--
----- -----------
-------- -------- ------ --- -----
-
--
-------------------------- ------ ------------- ----------------------------
-这里我们创建了一个 charts 数组，用于存储多个图表的数据。每个图表都有一个唯一的 id，数据，类型和列。
然后我们将 GoogleChartWrapperComponent 指令作为 ViewChild 的参数，引用 google-chart-wrapper 指令。接下来在模板中使用 google-chart-wrapper 指令，并将 charts 数组传递给指令。最后，我们还将指令的引用保存在组件中。
操作图表
接下来我们将介绍如何操作图表，以及如何绑定事件。
在组件中，我们可以使用指令的引用来操作图表，例如：
public ngOnInit() {
if (this.chart) {
this.chart.downloadChart({
filename: 'mychart',
format: 'jpeg'
});
}
}这里我们在 ngOnInit() 生命周期钩子中使用 downloadChart() 方法来下载图表。我们可以指定文件名和格式。
要绑定事件，我们可以在组件中定义一个方法，例如：
public onClick(e: any) {
console.log(e);
}然后在模板中将方法传递给指令，例如：
<google-chart #chart [data]="chartData" [type]="'BarChart'" (select)="onClick($event)"></google-chart>
这里我们将 onClick() 方法传递给 select 事件。当用户点击了图表中的一个元素时，这个方法就会被调用。
结论
通过上述介绍，你已经学会了如何在 Angular2 中使用 Google Charts，并使用 lab-ng2-google-charts 包来实现。这对于需要对数据进行可视化呈现的前端开发人员来说是非常有用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671c730d09270238227e0