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

• 原文地址：How To Make A Chart Using AJAX & REST API's
• 原文做者：Derek Fletes
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：sakila1012
• 校對者：easy-blue，Usey95

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

從 REST API 獲取數據是一種很常見的編程模式，使用這些數據來繪製圖表一樣常見。

咱們的不少用戶可能正在爲他們的 Web 應用程序這麼作，因此我想咱們（ZingChart）應該寫一篇關於如何正確使用的教程。

REST API 基本上是一個公開的數據集（一般是 JSON），它位於某個 URL 中，而且能夠經過 HTTP 請求以編程方式訪問。

免責聲明，本教程將在通常的 JavaScript 中運用。

我選擇了 Star Wars REST API做爲 REST 端點，從中獲取數據。我之因此選擇它，是由於它會返回易於使用的 JSON 數據，還不須要身份驗證。

目錄

• AJAX 請求
• 使用響應式文本
• 渲染圖表

若是你不想閱讀教程，你能夠在這裏看到完整的代碼（帶註釋）

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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。