使用电子表格为 AngularJS 应用程序中的图表提供支持
介绍
AngularJS 和 Google Sheets 如今风靡一时。两者都被广泛使用，开发人员也在它们周围发现有趣的用例。今天，我将分享我构建的一些东西，它不仅有趣，而且可能也有一些实际应用。
我们将构建一个 AngularJS 应用程序来创建交互式 JavaScript 图表，该图表将包含从 Google Sheets 实时导出的数据。首先，我们将简要介绍AngularJS、FusionCharts和Google Sheets。然后我们将把所有这些放在一起构建我们的项目。如果您已经了解这些技术，您可以跳过介绍并直接进入教程。
AngularJS
AngularJS 是最流行的 JavaScript Web 框架之一，用于创建单页 Web 应用程序。Angular 允许您在 Angular 指令的帮助下直接在 HTML 中声明组件。借助 AngularJS 指令和双向绑定，Angular 的声明方式使开发 Web 应用程序变得轻而易举。维护和测试 AngularJS 应用程序也非常容易。
FusionCharts
正如我上面提到的，我们将在本项目中使用 FusionCharts 的JavaScript 图表库。它拥有丰富的图表和图形集合；拥有超过 90 种图表类型和 965 张地图，您可以立即找到所需的一切。它不仅支持现代浏览器，还支持从 IE6 开始的旧浏览器。FusionCharts 支持 JSON 和 XML 数据格式，您可以导出 PNG、JPEG、SVG 或 PDF 格式的图表。它提供了一些漂亮的插件和包装器，其中之一就是我们今天要使用的；AngularJS。
Google 表格
Google Sheets（或 Google Spreadsheets）是一款基于 Web 的应用程序，可让您创建、更新和修改电子表格并在线实时共享数据。它基本上就像云端的 MS Excel 的早期版本。但它正在稳步变得更好，我毫不怀疑它会在不久的将来成为默认的电子表格应用程序。
最好的部分是，您可以通过 JSON 导出工作表中的数据！这正是我们这个项目所需要的功能。一旦您将工作表设置为以 JSON 格式导出数据，它就会打开各种可能性。而创建交互式图表只是我们将要探索的其中之一。
快速了解一下我们将要制作的内容（请参阅此处的现场 CodePen 演示）：
现在，让我们开始教程吧！
设置电子表格
在本教程中，我将创建一个包含两列数据的表单。其中一列包含标签，另一列包含与这些标签对应的值。您可以在此处查看此项目的示例表单。
如何提取 Google 表格中的数据
为了能够从 Google 表格创建图表，我们需要以某种方式获取表格中现有的数据。幸运的是，我们只需要在表格的设置中做一些更改。Google 表格的默认设置使得表格在未经身份验证的情况下无法在 Web 上访问。因此，首先我们需要修改此设置。为此，我们需要将共享设置更改为任何有链接的人或Web 上公开。请按照以下步骤操作：
- 步骤 1：点击工作表右上角的“共享”按钮。点击后您将看到此屏幕：
- 步骤 2：单击上述屏幕右下角的“高级”。您将看到以下内容：
- 步骤 3：现在上面的屏幕上显示“特定人员可以访问”。要更改此设置，请单击“更改...”。在出现的屏幕上选择“开启 - 任何有链接的人”（见下文）。
现在，任何有链接的人都可以访问我们的工作表，但我们还没有完成。为了使图表的数据以 JSON 或 XML 等不同格式提供，我们需要将 Google 工作表发布到 Web。点击“文件”>>“发布到 Web...”。然后在出现的屏幕上点击“发布”按钮：
现在我们的工作表已全部设置好，可以制作一些很棒的图表了！完成这些设置后，JSON 数据应该可以通过此URL获取
上述 URL 的格式如下：
spreadsheets.google.com/feeds/list/{{ID}}/od6/public/basic?alt=json
其中“id”是电子表格 ID。每个电子表格都有一个唯一的 ID，您可以在现场CodePen 演示中将我的工作表 ID 替换为您的 ID ，以绘制您的数据。
创建 AngularJS 应用程序
经过最初的学习曲线后，创建 AngularJS 应用程序非常容易，但乍一看可能会让人不知所措。我们不会在这里详细介绍创建 AngularJS 应用程序的过程，但大多数 AngularJS 概念都可以在这里查看：https://docs.angularjs.org/guide/。
要创建一个最小的 Angular 应用程序，我们需要包含 AngularJS 库、模板文件（HTML）和创建应用程序的 JS 文件。模板将包含 HTML 以及一些 Angular 指令。该应用程序将创建一个控制器，负责获取数据并将数据绑定到模板。控制器和模板之间的链接通过几个指令实现：ng-app和ng-controller。
这是需要添加的<script>标签，以包含来自 CDN 的最小化 AngularJS 1.5.0 文件：
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js”></script>
这是我们应用程序所需的 HTML：
<div ng-app="chartApp" ng-controller="chartController">
</div>
最后，在 JavaScript 文件中添加这段代码来定义 Angular 应用程序和控制器：
var myApp = angular.module('chartApp',[]);
myApp.controller('chartController', ['$scope', function($scope) {
// Further code will be added here
});
现在我们已经启动了角度应用程序，我们将继续创建图表。
创建图表
要创建图表，首先我们将通过 AJAX 调用获取电子表格中现有的数据。AJAX 请求成功后，我们将重组电子表格数据并使用 FusionCharts 创建图表。
为了进行 AJAX 调用，我们将使用 jQuery 的$.get()方法。
获取数据
要包含 jQuery，请添加以下脚本标签：
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.min.js></script>
现在我们将在应用程序的控制器中使用 jQuery 的$.get()方法对我们创建的 Google 表格进行 AJAX 调用。
$.get({
url:'https://spreadsheets.google.com/feeds/list/187iKB7ekhP96evCySKBWy5LfWErrJDono-8glzFPcCY/od6/public/basic?alt=json',
success: function (revenueData) {
// data processing and chart creation to go here
});
解析数据
我们从电子表格中获取的数据必须转换为 FusionCharts 能够理解的格式。FusionCharts 接受 JSON 数据作为包含标签和值的对象数组。它看起来是这样的：
{
“label”: “Potato”
为了实现这一点，我们需要在之前定义的jQuery get函数的 success 函数中运行下面一段代码。
var data = revenueData.feed.entry,
revenueDataLength = data.length,
chartData = [],
datum;
for (var i = 0; i < revenueDataLength; i++) {
datum = data[i];
chartData.push({
label: datum.title.$t,
value: datum.content.$t.replace("revenue: ", "")
});
}
对上述代码的解释：我们使用for循环来迭代revenueData.feed.entry中存在的每个电子表格的数据对象。我们这样做是为了从中提取标签和值。然后我们将提取的值存储在名为chartData的新数组中，该数组将由图表使用。
标签在数据对象的title.$t键中可用，值在content.$t键中可用。我们提取的值包含电子表格的列名，这是不必要的，因此我们将其删除。电子表格中的其余数据对于我们的项目来说不是必需的。
chartData现在包含 FusionCharts 能够理解的格式的数据。最后，我们就可以创建图表了！
渲染图表
要创建图表，我们将使用 FusionCharts 的AngularJS 图表插件。该插件通过 AngularJS 指令公开 FusionCharts，这使得在 AngularJS 中创建图表变得更容易一些。要了解有关该插件的更多信息或查看一些现场演示，请转到官方页面。对于本教程，我已在 Google Drive 上托管了该插件。
我们将创建一个 3D 环形图，因此我们只需要
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~