[譯 ] 如何使用 AJAX 和 REST API 建立一個圖表（How To Make A Chart Using AJAX & REST API's）

sakila發表於2017-12-04
RESTAPI

如何使用 AJAX 和 REST API 建立一個圖表

從 REST API 獲取資料是一種很常見的程式設計模式，使用這些資料來繪製圖表同樣常見。

我們的很多使用者可能正在為他們的 Web 應用程式這麼做，所以我想我們（ZingChart）應該寫一篇關於如何正確使用的教程。

REST API 基本上是一個公開的資料集（通常是 JSON），它位於某個 URL 中，並且可以通過 HTTP 請求以程式設計方式訪問。

免責宣告，本教程將在一般的 JavaScript 中運用。

我選擇了 Star Wars REST API作為 REST 端點，從中獲取資料。我之所以選擇它，是因為它會返回易於使用的 JSON 資料，還不需要身份驗證。

目錄

如果你不想閱讀教程，你可以在這裡看到完整的程式碼（帶註釋）

AJAX 請求

AJAX 是非同步 JavaScript 和 XML。Ajax 是一組用於非同步 HTTP 請求（GET，POST，PUT，DELETE）的方法。在這種情況下，非同步意味著我們不必每次發出 HTTP 請求就重新載入頁面。一個 AJAX 請求由 5 個步驟組成：

  1. 建立一個新的 HTTP 請求。

  2. 載入請求。

  3. 使用響應的資料。

  4. 建立請求。

  5. 傳送請求。

建立一個新的 HTTP 請求

要初始化一個 AJAX 請求，我們必須建立一個新的例項並將其儲存在一個變數中，如下所示：

var xhr = new XMLHttpRequest();複製程式碼

將它儲存在一個變數中允許我們後期使用其他的 AJAX 方法。我稱之為 'xhr'，因為這是一個簡短的縮寫，你也可以起一個你喜歡的變數名。

載入請求

我們的 AJAX 過程的下一步將是新增一個事件監聽器到我們的請求。我們的事件監聽器將響應一個 load 事件，一旦我們的請求載入就會觸發。接下來是一個回撥函式。

在我們的事件監聽器中，回撥函式將在 if 語句流中執行。如果我們從 API 端點收到 “200” 狀態（意味著請求完成），那麼我們會做一些事情。

整個順序將如下所示：

xhr.addEventListener('load', function() { 
if (this.status == 200) {
// do something 
}
});複製程式碼

處理響應

每個 AJAX 請求都會將資料返回給我們。微妙的部分是確保我們能夠以我們想要的方式處理這些資料。在這個過程中將會接收我們可以從這個響應中處理的資料有四個步驟：

  1. 將響應解析成 JSON 並將其儲存在變數中。

  2. 建立空陣列，可以存放我們想要的資料。

  3. 遍歷響應並將值放入我們的空陣列中。

  4. 將陣列中的值轉換為可用資料。

這裡每個步驟都將在我們事件監聽器內部的 if 語句中執行。*

解析響應

每個響應都會返回一串資料。我們需要一個 JSON 物件，這樣我們就可以遍歷這些值。我們可以使用 JSON.parse() 方法將響應字串轉換為 JSON 格式。我們可以將它儲存在一個名為 response 的變數中，以便後期我們可以像這樣處理它：

var response = JSON.parse(this.responseText);複製程式碼

現在我們有一個儲存在變數中的物件陣列。你可以通過 console.log(response); 來檢視完整的陣列。

在這個陣列中，有一個我們想要使用的特定物件叫做 results。這個物件包含 Star Wars 的 characters 和關於他們的資訊。我們將把這個物件儲存在一個變數中，這樣我們就可以在接下來的步驟中迴圈。

我們可以在我們現有的 response 變數上使用 JSON 點符號來訪問這個物件。我們將把它儲存在一個名為 characters 的變數中。它看起來像這樣：

var characters = response.results;複製程式碼

建立空陣列

接下來我們需要建立一個變數來儲存一個空陣列，我們將稱之為 characterInfo。當後期我們遍歷物件時，可以將值推送到這個陣列中。看看下面：

var characterInfo = [];複製程式碼

我們可以將陣列中的陣列直接放到 ZingChart 中，並使用x軸和y軸的值來繪製圖表。這非常有用。

遍歷響應

由於我們的 character 變數將被儲存在一個物件陣列中，我們可以使用 forEach 方法來遍歷它。

forEach 方法需要一個回撥函式，它將傳入一個 character 引數。character 引數與 for 迴圈中的 character[i] 相同。它代表著它正在迴圈的物件。我們可以使用 JSON 點符號來訪問我們在迴圈過程中需要的任何物件。

我們將從每個物件中提取兩條資料：name 和 height。這是我們之前的空陣列發揮作用的地方。在我們迴圈的每個物件中，我們可以使用回撥函式內的array.push() 方法將值推送到我們空的 characterInfo 陣列的末尾。

我們可以以陣列格式插入值，以便我們可以有一個包含 character name 和 height 陣列的陣列。這些值將作為字串值返回，這對於 name 屬性是很好的。但是，我們可以使用 parseInt() 方法將每個高度值從一個字串轉換為一個數字。

我們的程式碼將如下所示：

xhr.addEventListener('load', function() { 
if (this.status == 200) {
var response = 
JSON.parse(this.responseText);
var characters = response.results;
var characterData = [];
characters.forEach(function(character) {
characterData.push([character.name, 
parseInt(character.height)]);
});
});複製程式碼

建立請求

AJAX 請求的最後兩個步驟實際上是促使其發生的。首先是 open 方法，開啟了我們的請求。這個請求是一個 GET 請求，是 XMLHttpRequest()方法的 HTTP 部分。

GET 請求是實際到達 API 端點並獲取資料。我會告訴你它是什麼樣子，然後我們解析它。

xhr.open('GET', 'https://swapi.co/api/people/');複製程式碼

使用 .open，我們開啟這個請求到指定的 URL: https://swapi.co/api/people/。這將返回一個包含 Star Wars characters 和一些額外的資料的物件陣列。 REST API 通常具有一個可以獲取資料的 API URL。如果您感興趣，請檢視 Star Wars API docs檢視您可以獲取的不同資料集。

REST API 幾乎可以讓你通過操作 URL 來指定你想要的資料。稍後在自己的 demo 中使用 Star Wars API，看看你能得到什麼。

傳送請求

最後一步可以說是您的 AJAX 請求中最重要的一部分。如果你不這樣做，這個教程將失效。我們必須在我們的 xhr 變數上使用 .send() 方法來實際傳送請求，像這樣：

xhr.send();複製程式碼

現在我們已經有了 AJAX 請求的框架，我們可以使用從 Star Wars REST API 端點返回的響應。

渲染一個圖表

渲染圖表包括四個步驟：

  1. HTML：建立一個唯一 ID 的 <div>。

  2. CSS：給這個 </div> 賦值高度和寬度。

  3. JS：建立一個圖表配置變數。

  4. JS：使用 zingchart.render({}); 方法來呈現圖表。

HTML

為了渲染一個圖表，我們需要一個圖表容器。我們可以用 <div> 做這個。我們還需要給這個 <div> 唯一的 ID：

<div id="chartOne"></div>複製程式碼

我使用編號圖表方法，如果我們後期需要參考，在程式碼中很容易找到。

CSS

我們將在我們的 CSS 中使用這個唯一的 ID 來宣告一個高度和寬度：

#chartOne {
height: 200px;
width: 200px;
}複製程式碼

如果我們不能宣告高度和寬度，圖表將不會呈現。

圖表配置變數

您可以在您的應用程式中為您命名這個演示。 我選擇將其命名為 'chartOneData'，因為我們可以輕鬆地將其繫結至 'chartOne' ID。

這個變數實際上只有兩個重要的方面：

  1. 宣告一個圖表型別（在這個例子中我們使用的是柱形圖）。

  2. 將值新增到我們的圖表。

我們所有的圖表資訊將被放置在我們的事件監聽器回撥函式中。

宣告一個圖表型別

ZingChart 有一個可宣告的語法，所以選擇一個圖表型別就像宣告一個鍵值對一樣簡單：

var chartOneData = { 
type: 'bar'
};複製程式碼

將值新增到圖表

向我們的圖表新增值是以類似的方式來宣告一個圖表型別。這一次，我們將使用巢狀鍵值對來新增鍵值對。series 將採取一個名為值的物件。

在這個值物件中，我們可以將資料傳入到陣列中。這包含了我們所有的角色資訊。它看起來像這樣：

var chartOneData = { 
type: 'bar',
series: [
{
values: characterInfo
}
]
}複製程式碼

渲染圖表

渲染我們的圖表也非常簡單。我們可以使用一個內建的渲染方法，你所要做的就是傳入幾個鍵值對，它們是：

  1. id：這是我們傳入我們的 <div> 元素的 id。

  2. data：他將是我們之前宣告的圖表變數的名稱。

  3. height：這將是 '100％' 的值來填充我們的容器。

  4. width：這也將是 '100％' 的值來填補我們的容器。

zingchart.render({ 
id: 'chartOne',
data: chartOneData,
height: '100%',
width: '100%'
})複製程式碼

現在我們已經完成了，我們應該有一個完整的圖表，它已經成功地從 REST API 中提取資料。太好了！

完整 demo

<iframe height="500" scrolling="no" title="REST API AJAX Request" src="//codepen.io/zingchart/embed/de8544d3f634ae7c88144b3b237f19c0/?height=500&amp;theme-id=dark,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='https://codepen.io/zingchart/pen/de8544d3f634ae7c88144b3b237f19c0/'>REST API AJAX Request</a> by ZingChart (<a href='https://codepen.io/zingchart'>@zingchart</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>複製程式碼

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章