ng2-google-charts 是一个在 Angular 应用中使用 Google Charts 的 npm 包。它提供了一个易于使用的 Angular 组件，可以直接在应用中显示各种类型的图表，例如折线图，饼图，柱状图等。本文将提供一个简单的使用教程，告诉你如何在你的项目中使用 ng2-google-charts 包。
安装
你可以使用 npm 安装 ng2-google-charts 包。 在你的应用根目录下打开终端并运行以下命令：
npm install ng2-google-charts
安装完成后，你可以在你的应用中使用该包。
导入
在你的组件中引入 Ng2GoogleChartsModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------------------- - ---- -------------------- ----------- ------------- --------------- -------- --------------- ----------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
使用
在你的组件 HTML 模板中使用 google-chart 组件：
<google-chart [data]="data" [type]="type" [options]="options" [columnNames]="columnNames" > </google-chart>
在你的组件中定义一个全局变量：
-- -------------------- ---- -------
------ ----- ------------ -
---- - -
-------- -------- ------------
-------- ----- -----
-------- ----- -----
-------- ---- ------
-------- ----- ----
--
---- - -------------
------- - -
------- ----------- -----------
------ ------ - ----------
------ -
------ ------
--
------ -
------ --------
-
--
----------- - -------- -------- ------------
-这是一个简单的例子，它将显示一个简单的折线和柱状图图表。
更多示例
你可以在 ng2-google-charts 官方文档中找到更多的示例。 在那里，你可以了解如何在 Angular 应用中使用它的各种图表类型，例如饼图，仪表盘，地图，热力图等。
总结
ng2-google-charts 是一个很好的可以帮助你在 Angular 应用中显示各种类型图表的 npm 包。 本文提供了一个简单的使用教程，当你在下一次需要使用图表时，你可以直接使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65723