>但史蒂夫（Steve）是史蒂夫（Steve），他希望图表具有互动性。不仅如此，他还希望每当他在电子表格中更改数据时都可以更新图表。>
>首先要求您的客户将数据移至Google表（因为那是当今所有酷的人都在做的事情）。然后，我们可以轻松地实现他需要的功能 - 交互式JavaScript图表和动态更新。
她的客户同意（幸运的是！），珍妮和我编码了其余的解决方案。但是如何？好吧，这就是本教程会教您的。>
我将本教程分为五个易于遵循的步骤：从Google表中导出数据
>通过ajax
从Google表中获取JSON
重组数据使用FusionCharts创建图表。
自定义图表
。然后用一些数据填充您新创建的工作表。我从这里拿了我的：2015年世界上收入最高的演员。
>如您所见，左列包含我们图表的标签，右一个值与这些标签相对应。对于那些跟随家里的人，您可以在此处获取此纸的副本（转到
> file>>>制作副本）。 > Google表中可用的数据可以导出到JSON，XML等多种格式，并且一旦导出到任何这些格式，就可以通过网络轻松访问。
要将文档打开到网络，您需要对文档设置进行以下更改：>将文档的共享设置为Web上的
> public
或>我们将使用jQuery的get（）方法从Google表中获取数据。您可以从cdn中包含jQuery，如下所示：
>上面的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>>我们在这里做的是在响应中存在的每个Google Sheet数据对象上迭代。输入并从中提取标签和值。然后，我们将它们存储在一个新的数组parseddata中，该图表将由图表使用。
>标签可在标题中可用。$ t键，该值可在内容中可用。数据对象的$ t键。该值虽然包含表列名称，这不是必需的，因此我们将其剥离。可视化不需要Google表中的其余数据。
> parseddata阵列现在包含一种格式的数据，该格式将由FusionCharts理解，我们可以继续创建可视化。>步骤3：创建图表
创建
>实际创建并渲染基本的水平条形图到＃图表符合者中，我们将在成功回调中添加以下代码：
<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图表（2）
结论使用Google Sheets的数据在交互式JavaScript图表上经常询问问题（FAQ）
我可以在我的JavaScript图表中使用Google表外的其他数据源吗？ >
是的，除了Google表外，您还可以使用其他数据源用于JavaScript图表。大多数图表库，包括Chart.js，HighCharts和Google图表，都可以接受各种格式的数据，包括JSON，CSV和XML。您可以从各种来源获取这些数据，包括数据库，API和本地文件。但是，使用Google表作为数据源具有多个优点，包括简单的设置，实时更新以及共享和协作数据的能力。>通过Google Sheets的数据实时更新您的JavaScript图表，您需要设置一个投票机制。这涉及定期从Google表中获取数据并使用新数据更新图表。您可以使用JavaScript的setInterval函数来执行此操作，该功能允许您在指定的间隔中执行功能。在该功能中，您将从Google表中获取数据，将其解析为您的图表库可以理解的格式，然后使用新数据更新图表。
如何自定义JavaScript图表的外观？ >
>您可以使用图表库提供的选项自定义JavaScript图表的外观。大多数图表库，包括Chart.js，HighCharts和Google图表，允许您自定义图表的各个方面，包括颜色，字体，标签和工具提示。您还可以添加交互式功能，例如缩放和平移以及动画。>您可以通过最小化您从Google表格中获取的数据量，优化JavaScript代码并使用性能来优化JavaScript图表的性能，并使用性能图表库的功能。获取大量数据可以减慢图表的速度，因此请尝试获取所需的数据。您还可以通过避免不必要的计算并使用有效的算法来优化JavaScript代码。大多数图表库，包括Chart.js，HighCharts和Google图表，还提供性能功能，例如懒惰加载和硬件加速。
以上是使用Google表的数据进行交互式JavaScript图表的详细内容。更多信息请关注PHP中文网其他相关文章！
