使用Google表的数据进行交互式JavaScript图表
- Christopher Nolan原创
- 2025-02-18 10:57:13722浏览
钥匙要点
-
可以使用Google表中的数据创建
- 交互式JavaScript图表，每当对电子表格数据进行更改时，都会提供动态更新。
- >该过程涉及将Google表中的数据导出为JSON，通过Ajax获取数据，重组数据以匹配所需的格式，使用FusionCharts等工具创建图表，并自定义图表以适合特定需求。 > > FusionCharts接受JSON数据作为包含标签和值密钥的对象数组，并且可以根据类型，高度，宽度，标签和数据源来自定义图表。
- > Google表是一种方便且易于访问的数据源，其他来源也可以用于创建JavaScript图表，并且可以通过投票机制实时更新数据。
- > 本文由杰夫·史密斯（Jeff Smith）进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！
>但史蒂夫（Steve）是史蒂夫（Steve），他希望图表具有互动性。不仅如此，他还希望每当他在电子表格中更改数据时都可以更新图表。>
>首先要求您的客户将数据移至Google表（因为那是当今所有酷的人都在做的事情）。然后，我们可以轻松地实现他需要的功能 - 交互式JavaScript图表和动态更新。
她的客户同意（幸运的是！），珍妮和我编码了其余的解决方案。但是如何？好吧，这就是本教程会教您的。>
我将本教程分为五个易于遵循的步骤：从Google表中导出数据
>通过ajax
从Google表中获取JSON
重组数据使用FusionCharts创建图表。
自定义图表
- 因此，不用更多的是，让我们潜入！
- > >将Google表数据导出为JSON
- >在深入研究如何导出数据之前，让我们首先创建一个工作表。假设您有一个Google帐户，则可以通过进入Google Shays页面并击中
- >启动新的电子表格 按钮来做到这一点。在打开的电子表格中，创建两个列：
- rator 和
。然后用一些数据填充您新创建的工作表。我从这里拿了我的：2015年世界上收入最高的演员。
>如您所见，左列包含我们图表的标签，右一个值与这些标签相对应。对于那些跟随家里的人，您可以在此处获取此纸的副本（转到
> file>>>制作副本）。 > Google表中可用的数据可以导出到JSON，XML等多种格式，并且一旦导出到任何这些格式，就可以通过网络轻松访问。
要将文档打开到网络，您需要对文档设置进行以下更改：>将文档的共享设置为Web上的
> public
或- >
- 的任何人。要实现这一目标，请单击右上角的共享按钮，然后单击弹出窗口右下方出现的高级选项。 >将文档发布到网络。此选项可在> file>> 下发布到Web
- > >进行了这两个更改，可以通过以下方式以json格式访问文档中的数据： 您将需要用Google表格的ID替换电子表格，在我们的情况下是1AOZ_GCPYOEIMMND1N_MEYNOP8TJ0FCXPP1AOUHCPWZO。您可以在此处看到结果。
>我们将使用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：创建图表
>现在准备好数据且易于访问，我们可以继续创建图表。创建图表涉及以下步骤：
创建
在其中呈现图表的内部。
您可以使用提供的选项将交互性添加到您的JavaScript图表中由您的图表库。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您添加交互式功能，例如工具提示，缩放和平移以及动画。您还可以将事件听众添加到图表中，允许用户以某种方式与图表进行交互时执行函数，例如单击数据点。>
- >
- >使用Google表中的分析数据创建FusionCharts实例。 在FusionCharts实例上调用渲染方法以在Div。
- 在标记中，我们通过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图表。
- 自定义图表
>
以下是相同的图表，可以定制出更多的外观，哎呀，吸引人。>请参阅codepen上的sitepoint（@sitepoint）的笔JavaScript图表（2）
结论如您所见，从Google表格创建实时图表并不难。还可以为复杂的图表类型（例如多系列图表）生成实时JavaScript图表。复杂图表需要解决的唯一方法是如何将数据从Google表重组为图表所接受的格式。其他一切都保持不变。
- >有关如何使用Google床单数据查看Google文档的更多信息。 >我在本教程中使用了基本条形图，但是如果您想要不同的东西，请在此处查看其他图表类型。
- ps：我将在下面的评论部分中闲逛，因此请随时拍摄您对本教程的任何问题。我比乐于助人！
使用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图表应用程序？是的，您可以在移动应用中使用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中文网其他相关文章！
JavaScript json jquery ajax Array Object if for while format include try xml continue using public finally Event Generic copy JS console function this display column https issue everything Access excel Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn