使用Google表的数据进行交互式JavaScript图表-js教程-PHP中文网

钥匙要点

。

>如何使用Google表中的数据创建交互式JavaScript图表？首先，您需要设置Google表API。这涉及在Google Cloud控制台中创建一个新项目，启用Sheets API并创建凭据。拥有API密钥后，您可以使用它来访问Google表格数据。接下来，您需要使用JavaScript创建图表。有几个库，例如Chart.js，HighCharts和Google图表。您可以使用这些库来创建各种图表类型，包括条形图，线图和饼图。最后，您需要将图表连接到Google表格数据。这涉及使用API密钥从Google表中获取数据，将数据解析为图表库可以理解的格式，然后使用数据更新图表。使用Google表格数据的图表？

使用Google表中的数据创建交互式JavaScript图表时，包括API密钥的问题，获取数据的问题以及解析数据的困难。如果您的API密钥未正确设置，则可能无法访问Google表格数据。如果您在获取数据方面遇到困难，则可能是由于网络问题或Google Sheens API的问题所致。如果您在分析数据时遇到困难，则可能是因为数据的格式是您的图表库无法理解的。要解决这些问题，您应该检查您的API密钥，测试网络连接并确保您的数据以兼容格式。

>如何通过Google表格的数据实时更新我的JavaScript图表？

我可以与他人共享我的Interactive JavaScript图表是的，是的，您可以与他人共享您的交互式JavaScript图表。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您将图表导出为图像或PDF。然后，您可以与他人共享此文件。另外，如果您的图表托管在网页上，则可以简单地共享该页面的URL。如果您使用Google表作为数据源，也可以与他人共享Google表文档，从而使他们可以查看和编辑数据。

>如何优化我的JavaScript图表的性能？

首页

web前端

js教程

使用Google表的数据进行交互式JavaScript图表

Christopher Nolan

Feb 18, 2025 am 10:57 AM

使用Google表的数据进行交互式JavaScript图表

钥匙要点

交互式JavaScript图表，每当对电子表格数据进行更改时，都会提供动态更新。
>该过程涉及将Google表中的数据导出为JSON，通过Ajax获取数据，重组数据以匹配所需的格式，使用FusionCharts等工具创建图表，并自定义图表以适合特定需求。 >
> Google表是一种方便且易于访问的数据源，其他来源也可以用于创建JavaScript图表，并且可以通过投票机制实时更新数据。
>

认识我的朋友珍妮。她最近开始编码网站。她热爱自己的工作，直到遇到史蒂夫（Steve）的工作很高兴。史蒂夫（Steve）在电子表格中有很多数据，他想在他的网站上显示。我们的朋友（现在珍妮也是你的朋友！）建议史蒂夫在Excel中制作图表，并将它们作为图像上传到网站。

>但史蒂夫（Steve）是史蒂夫（Steve），他希望图表具有互动性。不仅如此，他还希望每当他在电子表格中更改数据时都可以更新图表。> 珍妮不知道如何解决这个问题，所以她来找我。而且，作为我的好朋友，我给了她这个建议：

>首先要求您的客户将数据移至Google表（因为那是当今所有酷的人都在做的事情）。然后，我们可以轻松地实现他需要的功能 - 交互式JavaScript图表和动态更新。

她的客户同意（幸运的是！），珍妮和我编码了其余的解决方案。但是如何？好吧，这就是本教程会教您的。

我将本教程分为五个易于遵循的步骤：>

从Google表中导出数据

>通过ajax

从Google表中获取JSON

重组数据

使用FusionCharts创建图表。

自定义图表

>
>启动新的电子表格
rator

收入

。然后用一些数据填充您新创建的工作表。我从这里拿了我的：2015年世界上收入最高的演员。

如您所见，左列包含我们图表的标签，右一个值与这些标签相对应。对于那些跟随家里的人，您可以在此处获取此纸的副本（转到

> file>>>制作副本）。 > Google表中可用的数据可以导出到JSON，XML等多种格式，并且一旦导出到任何这些格式，就可以通过网络轻松访问。

要将文档打开到网络，您需要对文档设置进行以下更改：>

>将文档的共享设置为Web上的

> public

或

的任何人。要实现这一目标，请单击右上角的共享按钮，然后单击弹出窗口右下方出现的高级选项。 >将文档发布到网络。此选项可在> file>>
> >进行了这两个更改，可以通过以下方式以json格式访问文档中的数据： 您将需要用Google表格的ID替换电子表格，在我们的情况下是1AOZ_GCPYOEIMMND1N_MEYNOP8TJ0FCXPP1AOUHCPWZO。您可以在此处看到结果。

>使用jQuery从Google表中获取JSON

>我们将使用jQuery的get（）方法从Google表中获取数据。您可以从cdn中包含jQuery，如下所示：

>添加了<script>标签，请在我们创建的电子表格URL上拨打$。 </script>

>上面的jQuery代码向Google表格URL提出了AJAX请求，并且在成功获取数据后，它将称为成功函数。此函数可将从服务器返回到控制台的数据记录。我鼓励您运行此脚本并花点时间检查返回的内容。

重组数据

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span>
</span>

登录后复制

>需要对Google表的JSON数据进行重组，以匹配我们可视化库接受的数据格式。对于本教程，我们将使用FusionCharts。 FusionCharts接受JSON数据作为包含标签和值密钥的对象数组。这就是它的样子：

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

登录后复制

为了实现这一目标，我们需要在我们之前定义的jQuery获取函数的成功回调中运行以下代码。>

>我们在这里做的是在响应中存在的每个Google Sheet数据对象上迭代。输入并从中提取标签和值。然后，我们将它们存储在一个新的数组parseddata中，该图表将由图表使用。

。

>标签可在标题中可用。$ t键，该值可在内容中可用。数据对象的$ t键。该值虽然包含表列名称，这不是必需的，因此我们将其剥离。可视化不需要Google表中的其余数据。

> parseddata阵列现在包含一种格式的数据，该格式将由FusionCharts理解，我们可以继续创建可视化。

>步骤3：创建图表

>现在准备好数据且易于访问，我们可以继续创建图表。创建图表涉及以下步骤：

创建

在其中呈现图表的内部。

>使用Google表中的分析数据创建FusionCharts实例。

中渲染。

在标记中，我们通过cdn包含FusionCharts库：>

以及图表的包含元素。这可以包含某个位置持有人的文本，该文本将在图表呈现之前显示。

>实际创建并渲染基本的水平条形图到＃图表符合者中，我们将在成功回调中添加以下代码：

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span>
</span>

登录后复制

>让我们看一下为图表定义的一些配置选项：

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

登录后复制

>类型：定义我们要绘制的图表类型 - 在此示例中bar2d。

<span>[{
</span>  <span>"label": "Robert Downey Jr.",
</span>  <span>"value": "80"
</span><span>}
</span><span>...]
</span>

登录后复制

高：图表的高度以像素为单位。

宽度：图表的宽度。

图：在这里，我们可以设置标题，两个轴标签，一个值前缀等标签等。
数据：图表将根据。构建图表的数据
>这是我们到目前为止的演示：
>请参阅codepen上的sitepoint（@sitepoint）的笔JavaScript图表。
自定义图表

>虽然上述演示起作用，但看起来可能有些通用。幸运的是，您几乎可以自定义图表外观的各个方面。 FusionCharts有一些出色的文档，我建议您查看。

以下是相同的图表，可以定制出更多的外观，哎呀，吸引人。

>请参阅codepen上的sitepoint（@sitepoint）的笔JavaScript图表（2）

结论

如您所见，从Google表格创建实时图表并不难。还可以为复杂的图表类型（例如多系列图表）生成实时JavaScript图表。复杂图表需要解决的唯一方法是如何将数据从Google表重组为图表所接受的格式。其他一切都保持不变。

>有关如何使用Google床单数据查看Google文档的更多信息。

使用Google Sheets的数据在交互式JavaScript图表上经常询问问题（FAQ）

>如何使用Google表中的数据创建交互式JavaScript图表？首先，您需要设置Google表API。这涉及在Google Cloud控制台中创建一个新项目，启用Sheets API并创建凭据。拥有API密钥后，您可以使用它来访问Google表格数据。接下来，您需要使用JavaScript创建图表。有几个库，例如Chart.js，HighCharts和Google图表。您可以使用这些库来创建各种图表类型，包括条形图，线图和饼图。最后，您需要将图表连接到Google表格数据。这涉及使用API密钥从Google表中获取数据，将数据解析为图表库可以理解的格式，然后使用数据更新图表。使用Google表格数据的图表？

使用Google表中的数据创建交互式JavaScript图表时，包括API密钥的问题，获取数据的问题以及解析数据的困难。如果您的API密钥未正确设置，则可能无法访问Google表格数据。如果您在获取数据方面遇到困难，则可能是由于网络问题或Google Sheens API的问题所致。如果您在分析数据时遇到困难，则可能是因为数据的格式是您的图表库无法理解的。要解决这些问题，您应该检查您的API密钥，测试网络连接并确保您的数据以兼容格式。

我可以在我的JavaScript图表中使用Google表外的其他数据源吗？ >

是的，除了Google表外，您还可以使用其他数据源用于JavaScript图表。大多数图表库，包括Chart.js，HighCharts和Google图表，都可以接受各种格式的数据，包括JSON，CSV和XML。您可以从各种来源获取这些数据，包括数据库，API和本地文件。但是，使用Google表作为数据源具有多个优点，包括简单的设置，实时更新以及共享和协作数据的能力。

>如何通过Google表格的数据实时更新我的JavaScript图表？

>通过Google Sheets的数据实时更新您的JavaScript图表，您需要设置一个投票机制。这涉及定期从Google表中获取数据并使用新数据更新图表。您可以使用JavaScript的setInterval函数来执行此操作，该功能允许您在指定的间隔中执行功能。在该功能中，您将从Google表中获取数据，将其解析为您的图表库可以理解的格式，然后使用新数据更新图表。

我可以与他人共享我的Interactive JavaScript图表是的，是的，您可以与他人共享您的交互式JavaScript图表。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您将图表导出为图像或PDF。然后，您可以与他人共享此文件。另外，如果您的图表托管在网页上，则可以简单地共享该页面的URL。如果您使用Google表作为数据源，也可以与他人共享Google表文档，从而使他们可以查看和编辑数据。

如何自定义JavaScript图表的外观？ >

>您可以使用图表库提供的选项自定义JavaScript图表的外观。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您自定义图表的各个方面，包括颜色，字体，标签和工具提示。您还可以添加交互式功能，例如缩放和平移以及动画。

>

>如何在我的JavaScript图表中添加互动率？

您可以使用提供的选项将交互性添加到您的JavaScript图表中由您的图表库。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您添加交互式功能，例如工具提示，缩放和平移以及动画。您还可以将事件听众添加到图表中，允许用户以某种方式与图表进行交互时执行函数，例如单击数据点。

我可以在移动中使用JavaScript图表应用程序？

是的，您可以在移动应用中使用JavaScript图表。大多数图表库，包括Chart.js，HighCharts和Google图表，都与移动设备兼容。但是，您可能需要进行一些调整，以确保您的图表在较小的屏幕上正确显示。这可能涉及调整图表的大小，元素的布局和触摸交互。使用Web浏览器中的开发人员工具图表。这些工具使您可以检查图表的元素，查看控制台日志，然后逐步浏览JavaScript代码。如果您在Google表格数据方面遇到麻烦，也可以使用Google Shays API Explorer来测试您的API请求。

>

>如何优化我的JavaScript图表的性能？

>您可以通过最小化您从Google表格中获取的数据量，优化JavaScript代码并使用性能来优化JavaScript图表的性能，并使用性能图表库的功能。获取大量数据可以减慢图表的速度，因此请尝试获取所需的数据。您还可以通过避免不必要的计算并使用有效的算法来优化JavaScript代码。大多数图表库，包括Chart.js，HighCharts和Google图表，还提供性能功能，例如懒惰加载和硬件加速。

以上是使用Google表的数据进行交互式JavaScript图表的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn