使用Google表的數據進行交互式JavaScript圖表

鑰匙要點

可以使用Google表中的數據創建
• 交互式JavaScript圖表，每當對電子表格數據進行更改時，都會提供動態更新。
• >該過程涉及將Google表中的數據導出為JSON，通過Ajax獲取數據，重組數據以匹配所需的格式，使用FusionCharts等工具創建圖表，並自定義圖表以適合特定需求。 >
> FusionCharts接受JSON數據作為包含標籤和值密鑰的對像數組，並且可以根據類型，高度，寬度，標籤和數據源來自定義圖表。
• > Google表是一種方便且易於訪問的數據源，其他來源也可以用於創建JavaScript圖表，並且可以通過投票機制實時更新數據。
• >
本文由傑夫·史密斯（Jeff Smith）進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！

認識我的朋友珍妮。她最近開始編碼網站。她熱愛自己的工作，直到遇到史蒂夫（Steve）的工作很高興。 史蒂夫（Steve）在電子表格中有很多數據，他想在他的網站上顯示。我們的朋友（現在珍妮也是你的朋友！）建議史蒂夫在Excel中製作圖表，並將它們作為圖像上傳到網站。

>但史蒂夫（Steve）是史蒂夫（Steve），他希望圖表具有互動性。不僅如此，他還希望每當他在電子表格中更改數據時都可以更新圖表。 > 珍妮不知道如何解決這個問題，所以她來找我。而且，作為我的好朋友，我給了她這個建議：

>首先要求您的客戶將數據移至Google表（因為那是當今所有酷的人都在做的事情）。然後，我們可以輕鬆地實現他需要的功能 - 交互式JavaScript圖表和動態更新。

她的客戶同意（幸運的是！），珍妮和我編碼了其餘的解決方案。但是如何？好吧，這就是本教程會教您的。

>

我將本教程分為五個易於遵循的步驟：>

從Google表中導出數據

>通過ajax

從Google表中獲取JSON

重組數據

使用FusionCharts創建圖表。

自定義圖表

因此，不用更多的是，讓我們潛入！
2. >
>將Google表數據導出為JSON
>在深入研究如何導出數據之前，讓我們首先創建一個工作表。假設您有一個Google帳戶，則可以通過進入Google Shays頁面並擊中
4. >啟動新的電子表格
按鈕來做到這一點。在打開的電子表格中，創建兩個列：
5. rator
和

收入

。然後用一些數據填充您新創建的工作表。我從這裡拿了我的：2015年世界上收入最高的演員。

>

如您所見，左列包含我們圖表的標籤，右一個值與這些標籤相對應。對於那些跟隨家裡的人，您可以在此處獲取此紙的副本（轉到

> file>>>製作副本）。 > Google表中可用的數據可以導出到JSON，XML等多種格式，並且一旦導出到任何這些格式，就可以通過網絡輕鬆訪問。

要將文檔打開到網絡，您需要對文檔設置進行以下更改：>

>將文檔的共享設置為Web上的

> public

或

>
• 的任何人。要實現這一目標，請單擊右上角的共享按鈕，然後單擊彈出窗口右下方出現的高級選項。 >將文檔發佈到網絡。此選項可在> file>>
下發佈到Web
• > >進行了這兩個更改，可以通過以下方式以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實例。
在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圖表。
• 自定義圖表

>雖然上述演示起作用，但看起來可能有些通用。幸運的是，您幾乎可以自定義圖表外觀的各個方面。 FusionCharts有一些出色的文檔，我建議您查看。

>

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

>請參閱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圖表中由您的圖表庫。大多數圖表庫，包括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中文網其他相關文章！