g2图表数据实时交互_使用Google表格中的数据的交互式JavaScript图表

最新推荐文章于 2023-04-14 12:12:57 发布

dingshi7798

最新推荐文章于 2023-04-14 12:12:57 发布

阅读量311

点赞数

文章标签： java python javascript 数据可视化大数据 ViewUI

原文链接：https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/

版权

g2图表数据实时交互

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上的“公共”或具有链接的任何人 。为此，请单击右上角的“ 共享”按钮，然后单击弹出窗口右下角显示的“ 高级”选项。
将文档发布到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函数。此功能将从服务器返回的数据记录到控制台。我鼓励您运行此脚本并花一些时间检查确切返回的内容。

重组数据

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

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：我将在下面的评论部分中徘徊，因此随时提出关于本教程的任何问题。我非常乐意提供帮助！

翻译自: https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/

g2图表数据实时交互

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
g2图表数据实时交互_使用Google表格中的数据的交互式JavaScript图表

g2图表数据实时交互 Jeff Smith对这篇文章进行了同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！认识我的朋友珍妮。她最近开始为网站编码。她热爱自己的工作，并非常高兴，直到遇到了史蒂夫（Steve），史蒂夫（Steve）就是一个不太随和的客户。史蒂夫在电子表格中有很多数据，他想在他的网站上显示这些数据。我们的朋友（现在珍妮也是您的朋...
复制链接

扫一扫