简介
backbone-ng2-google-charts是一个基于Angular和BackboneJS的组件库，可以方便地实现谷歌图表（Google Charts）的绑定和展示。使用该包可以快速搭建聚合报表或数据可视化界面。npm包中默认的图表类型包括柱状图、饼图、折线图、时间线图等等。
安装
使用npm包管理器便可直接安装组件库：
npm install backbone-ng2-google-charts --save
安装后需要通过下列imports导入相关的模块：
import {GoogleChartsModule} from 'backbone-ng2-google-charts';使用方法
backbone-ng2-google-charts的核心组件是GoogleChartsLoaderService，它负责载入谷歌图表库并提供数据和参数等来绑定图表。以下是示例代码：
定义模拟的数据和选择项以及构造函数：
-- -------------------- ---- -------
-------------------- - -
------------ ----------
-------- ----
---------- ----
------ ----
------- ----
-------------- ----
------- ----
------- ----
--------- ---
--
----------------------- - -
------ ---- - --------- -- --------
---------- ------- -------
------ -
------ ---------
--------- -
--
------ -
------ ----------
-
--
------------------- -------------- -------------------------- --在组件内调用ngOnInit，使用loaderService来调用加载函数，传递 options 和 type
-- -------------------- ---- -------
---------- -
---------------------------------- ---------------------------- -- -
-----------------------
---
-
------------------
----- ---- - ------------------------------------------------------------
----- ----- - --- -----------------------------------------------------------------------
---------------- -------------------------
-使用html来渲染数据和图表：
<div id="column-chart"></div>
之后，运行应用程序，您应该可以看到一个名为“column-chart”的柱状图。
总结
在这篇文章中，我们介绍了如何安装backbone-ng2-google-charts，并在Angular中使用GoogleChartsLoaderService组件，实现谷歌图表的绑定和展示。
此外，我们还演示了如何使用模拟数据和一些基本的选择项在组件上创建柱状图。
该npm包可以轻松实现数据可视化和报表聚合的需求，具有广泛的适用性和可扩展性，对于前端开发者来说是一个不可错过的利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ea81e8991b448d794a