Jeff Smith对这篇文章进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!
认识我的朋友珍妮。 她最近开始为网站编码。 她热爱自己的工作,并非常高兴,直到遇到史蒂夫(Steve),史蒂夫(Steve)就是一个不太随和的客户。
史蒂夫在电子表格中有很多数据,他想在他的网站上显示这些数据。 我们的朋友(现在珍妮也是您的朋友!)建议史蒂夫在Excel中制作图表并将其作为图像上传到网站。
但是史蒂夫是史蒂夫,他希望图表能够互动。 不仅如此,他还希望在更改电子表格中的数据时更新图表。
珍妮不知道该如何解决这个问题,于是她来找我。 而且,作为我的好朋友,我给了她以下建议:
首先,请您的客户将其数据移至Google表格(因为这就是当今所有酷人所做的事情)。 然后,我们可以轻松实现他需要的功能-交互式JavaScript图表和动态更新。
她的客户同意了(幸运的是!),我和珍妮编写了解决方案的其余部分。 但是如何? 嗯,这就是本教程将教您的内容。
我已将本教程分为五个易于遵循的步骤:
- 从Google表格导出数据
- 通过Ajax从Google表格中获取JSON
- 重组数据
- 使用FusionCharts创建图表。
- 自定义图表
因此,事不宜迟,让我们开始吧!
将Google表格数据导出为JSON
在研究如何导出数据之前,我们首先创建一个工作表。 假设您拥有Google帐户,则可以转到Google表格页面,然后点击开始新电子表格按钮来完成此操作。 在打开的电子表格中,创建两列: Actor和Income 。 然后用一些数据填充新创建的表。 我从这里摘走了我的作品: 《 2015年全球最高薪演员》 。
如您所见,左列包含图表的标签,右列包含与这些标签相对应的值。 对于那些在家中跟随的人,您可以在此处获取此工作表的副本 (转到“ 文件” >“ 制作副本” )。
Google表格中的可用数据可以导出为JSON,XML等多种格式。一旦导出为这些格式中的任何一种,都可以通过网络轻松访问。
要将文档打开到网络,您需要对文档设置进行以下更改:
- 将文档共享设置为“网络上的公开”或具有链接的任何人 。 为此,请单击右上角的“ 共享”按钮,然后单击弹出窗口右下角显示的“ 高级”选项。
- 将文档发布到Web。 该选项位于“ 文件” >“ 发布到网络”下
进行这两项更改后,可以通过以下方式以JSON格式访问文档中的数据:https://spreadsheets.google.com/feeds/list/SPREADSHEET/od6/public/basic?alt=json
您需要用Google SPREADSHEET
的ID替换SPREADSHEET
,在我们的示例中为1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo
。 您可以在此处查看结果 。
使用jQuery从Google表格中获取JSON
我们将使用jQuery的get()方法从Google表格中获取数据。 您可以从CDN包含jQuery,如下所示:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
添加<script>
标记后,在我们创建的电子表格URL上调用$.get
。
var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
url = "https://spreadsheets.google.com/feeds/list/" +
spreadsheetId +
"/od6/public/basic?alt=json";
$.get({
url: url,
success: function(response) {
console.log(response);
}
});
上面的jQuery代码向Google Sheets URL发出Ajax请求,并在成功获取数据后调用success
函数。 此功能将从服务器返回的数据记录到控制台。 我鼓励您运行此脚本并花一些时间检查返回的确切信息。
重组数据
Google表格中的JSON数据需要进行一些重组,以匹配我们的可视化库接受的数据格式。 在本教程中,我们将使用FusionCharts 。
FusionCharts接受JSON数据作为包含label
和value
键的对象数组。 看起来是这样的:
[{
"label": "Robert Downey Jr.",
"value": "80"
}
...]
为此,我们需要在前面定义的jQuery get
函数的success
回调中运行以下代码。
var data = response.feed.entry,
len = data.length,
i = 0,
parsedData = [];
for (i = 0; i < len; i++) {
parsedData.push({
label: data[i].title.$t,
value: data[i].content.$t.replace('Income: ', '')
});
}
我们在这里要做的是遍历response.feed.entry
存在的每个Google表格数据对象,并从中提取label
和value
。 然后,我们将它们存储在新数组parsedData
,该数组parsedData
图表使用。
label
在title.$t
键中可用,值在content.$t
键中数据对象可用。 尽管该值包含工作表列名,但这不是必需的,因此我们将其删除。 可视化不需要Google表格中的其余数据。
现在, parsedData
数组包含FusionCharts可以理解的格式的数据,我们可以继续创建可视化文件。
步骤3:创建图表
现在,我们的数据已经准备就绪并且可以访问了,我们可以继续创建图表了。 创建图表涉及以下步骤:
- 创建一个
<div>
,将在其中呈现图表。 - 使用Google表格中的解析数据创建FusionCharts实例。
- 在FusionCharts实例上调用
render
方法以将其渲染到div
。
在标记中,我们通过CDN包括FusionCharts库:
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
以及图表的包含元素。 它可以包含一些占位符文本,这些文本将在图表呈现之前显示。
<div id="chart-container">
<p>The chart will render here!</p>
</div>
为了实际创建基本的水平条形图并将其呈现到#chart-container
,我们将以下代码添加到success
回调中:
new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '100%',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Highest Paid Actors",
"yAxisName": "Annual Income (in milion USD)",
"numberPrefix": "$"
},
"data": parsedData
}
}).render();
让我们看看为图表定义的一些配置选项:
-
type
:定义我们要绘制的图表类型–在此示例中为bar2d
。 -
height
:图表的高度(以像素为单位)。 -
width
:图表的宽度。 -
chart
:在这里我们可以设置标题,两个轴的标签,值前缀等。 -
data
:将根据其构建图表的数据。
这是到目前为止我们所获得的演示:
请参见CodePen上的PenJavaScript 图表+ SitePoint( @SitePoint )提供的Google表格 。
自定义图表
尽管上面的演示有效,但看起来可能有点通用。 幸运的是,您几乎可以自定义图表外观的每个方面。 FusionCharts有一些出色的文档 ,建议您查看。
这是定制的同一张图表,看起来更加吸引人。
请参阅CodePen上的SitePoint ( @SitePoint )的Pen JavaScript Charts + Google表格(2) 。
结论
如您所见,从Google表格创建实时图表并不难。 甚至还可以为复杂的图表类型(例如多系列图表)生成实时JavaScript图表。 对于复杂的图表,唯一需要解决的事情是如何将Google表格中的数据重构为图表可接受的格式。 其他所有内容保持不变。
- 有关如何使用Google表格数据的更多信息,请查阅Google文档 。
- 我在本教程中使用了基本的条形图,但是如果您希望使用其他的条形图 ,请查看此处提供的其他图表类型 。
PS:我将在下面的评论部分中闲逛,所以请随时提出关于本教程的任何问题。 我非常乐意提供帮助!
From: https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/