如何在 JavaScript 中構(gòu)建 COVID-19 跟蹤器
渴望一個(gè)新項(xiàng)目來磨練你的 JS 技能？試試這個(gè)使用 JavaScript 創(chuàng)建 COVID-19 跟蹤器的教程。
正在尋找一個(gè)快速項(xiàng)目來練習(xí)您的 Web 開發(fā)技能？在整個(gè)新冠大流行期間，您可能已經(jīng)看到了許多不同的 COVID 追蹤器和圖表——以下是如何以最少的努力制作自己的追蹤器。
您將學(xué)習(xí) JavaScript 中的一些有用技術(shù)，包括如何從 API 獲取遠(yuǎn)程數(shù)據(jù)以及如何使用圖表庫來顯示它。讓我們開始吧。你將要建造什么
本指南將幫助演示使用 JavaScript 使用 API 的基礎(chǔ)知識(shí)。您將學(xué)習(xí)如何從遠(yuǎn)程源獲取數(shù)據(jù)。您還將看到如何使用圖表庫來顯示獲取的數(shù)據(jù)。
本文中使用的所有代碼都可以在Github存儲(chǔ)庫中找到。
探索數(shù)據(jù)源
為了獲得與 COVID 相關(guān)的最新數(shù)據(jù)，我們將使用disease.sh，它自稱為“開放疾病數(shù)據(jù) API”。
這個(gè) API 非常棒，因?yàn)椋?/p>
- 它有許多不同的數(shù)據(jù)源，每一個(gè)都提供略有不同的格式
- 它有據(jù)可查，沒有示例，但有很多關(guān)于每個(gè)disease.sh端點(diǎn)如何工作的詳細(xì)信息
- 它返回 JSON，這很容易在 JavaScript 中使用
- 它完全開放且免費(fèi)使用，無需身份驗(yàn)證
最后一點(diǎn)特別重要：許多 API 要求您通過復(fù)雜的 OpenAuth 過程，或者根本不適用于在瀏覽器中運(yùn)行的 JavaScript。
在本教程中，我們將使用來自 disease.sh 的美國紐約時(shí)報(bào)數(shù)據(jù)。該端點(diǎn)包括大流行期間（自 2020 年 1 月 21 日起）的數(shù)據(jù)，格式易于使用。看看我們將使用的disease.sh 平臺(tái)的一些數(shù)據(jù)：
如果您習(xí)慣于處理 JSON，則可以毫無問題地閱讀它。這是更易讀的布局中的一小段摘錄：
[{
"date":"2020-01-21",
"cases":1,
"deaths":0,
"updated":1643386814538
},{
"date":"2020-01-22",
"cases":1,
"deaths":0,
"updated":1643386814538
}]API 返回一個(gè)簡單的對象數(shù)組，每個(gè)對象代表一個(gè)帶有日期、案例等的數(shù)據(jù)點(diǎn)。
設(shè)置 HTML
現(xiàn)在，我們將設(shè)置一些非常簡單的骨架 HTML。最終，您需要包含一些外部資源，但這足以開始：
<html>
<head>
<title>Covid Tracker</title>
</head>
<body>
<h2>Covid cases, US</h2>
<div class="chart" id="covid-all-us-cases"></div>
<script src="covid.js"></script>
</body>
</html>
使用 JavaScript 獲取數(shù)據(jù)
首先從 API 獲取數(shù)據(jù)并將其顯示在瀏覽器控制臺(tái)中。這將幫助您驗(yàn)證您是否可以從遠(yuǎn)程服務(wù)器獲取并處理響應(yīng)。將以下代碼添加到您的covid.js文件中：
var api = 'https://disease.sh/v3/covid-19/nyt/usa';
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
});
Fetch JavaScript API 是 XMLHttpRequest 的更新替代品（在MDN上詳細(xì)了解它）。它使用了一個(gè) Promise，這使得帶有回調(diào)的異步編程更容易一些。使用此范例，您可以將多個(gè)異步步驟鏈接在一起。
獲取到所需的 URL 后，使用 Promise 的then方法處理成功案例。通過json()方法將響應(yīng)的正文解析為 JSON 。
因?yàn)閠hen()總是返回一個(gè) Promise，你可以繼續(xù)鏈接來處理每一步。現(xiàn)在，在第二步中，只需將數(shù)據(jù)記錄到控制臺(tái)，以便您可以檢查它：
您將能夠與控制臺(tái)中顯示的對象進(jìn)行交互，以檢查來自 API 的數(shù)據(jù)。你已經(jīng)取得了很大的進(jìn)步，所以當(dāng)你準(zhǔn)備好后繼續(xù)下一步。
使用 billboard.js 顯示數(shù)據(jù)
讓我們使用 JavaScript 庫來繪制數(shù)據(jù)，而不是記錄數(shù)據(jù)。通過將之前的代碼更新為如下所示為此做好準(zhǔn)備：
fetch(api)
.then(response => response.json())
.then(data => {
plotData(data);
});function plotData(data) {
}
我們將使用billboard.js庫為我們提供一個(gè)簡單的交互式圖表。billboard.js 是基本的，但它支持幾種不同的圖表類型，并允許您自定義軸、標(biāo)簽和圖表的所有標(biāo)準(zhǔn)成分。
您需要包含三個(gè)外部文件，因此將它們添加到 html 的 HEAD 中：
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.3.0/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.3.0/billboard.min.css" />
用最基本的圖表試試 billboard.js。將以下內(nèi)容添加到plotData()：
bb.generate({
bindto: "#covid-all-us-cases",
data: {
type: "line",
columns: [
[ "data", 10, 40, 20 ]
]
}
});
bindto屬性定義了一個(gè)選擇器，它標(biāo)識(shí)要在其中生成圖表的目標(biāo) HTML 元素。data 用于折線圖，只有一列。注意，data 列是一個(gè)由四個(gè)值組成的數(shù)組，第一個(gè)值是一個(gè)字符串，作為該數(shù)據(jù)的名稱(“data”)。
你應(yīng)該會(huì)看到一個(gè)類似這樣的圖表，序列中有三個(gè)值，并有一個(gè)圖例將其標(biāo)記為“data”:
剩下要做的就是使用API 中已經(jīng)傳遞給plotData()的實(shí)際數(shù)據(jù)。這需要更多的工作，因?yàn)槟枰獙⑵滢D(zhuǎn)換為適當(dāng)?shù)母袷讲⒅甘?billboard.js 正確顯示所有內(nèi)容。
我們將繪制一個(gè)顯示完整案例歷史的圖表。首先構(gòu)建兩列，一列用于包含日期的 x 軸，另一列用于我們將在圖表上繪制的實(shí)際數(shù)據(jù)系列：
var keys = data.map(a => a.date),
cases = data.map(a => a.cases);
keys.unshift("dates");
cases.unshift("cases");
剩下的工作需要調(diào)整廣告牌對象。
bb.generate({
bindto: "#covid-all-us-cases",
data: {<strong> x: "dates",strong>
type: "line",<strong> columns: [
keys,
cases
]strong>
}
});
還要添加以下軸屬性：
axis: {
x: {
type: "category",
tick: {
count: 10
}
}
}
這可確保 x 軸僅顯示 10 個(gè)日期，因此它們的間距很好。請注意，最終結(jié)果是交互式的。當(dāng)您將光標(biāo)移到圖表上時(shí)，廣告牌會(huì)在彈出窗口中顯示數(shù)據(jù)：
在 GitHub中查看此跟蹤器的源代碼。
變化
看看如何以不同的方式使用源數(shù)據(jù)來更改使用 billboard.js 繪制的內(nèi)容。
僅查看一年的數(shù)據(jù)
整個(gè)圖表非常繁忙，因?yàn)樗罅繑?shù)據(jù)。減少噪音的一種簡單方法是將時(shí)間段限制為一年，例如（GitHub）。你只需要改變一行就可以做到這一點(diǎn)，你根本不需要接觸plotData函數(shù)；它通常足以處理一組減少的數(shù)據(jù)。
在第二個(gè).then()調(diào)用中，替換：
plotData(data);
和：
plotData(data.filter(a => a.date > '2022'));
filter()方法通過對數(shù)組中的每個(gè)值調(diào)用函數(shù)來減少數(shù)組。當(dāng)該函數(shù)返回true時(shí)，它會(huì)保留該值。否則，它會(huì)丟棄它。
如果值的日期屬性大于“2022” ，上述函數(shù)將返回 true 。這是一個(gè)簡單的字符串比較，但它適用于該數(shù)據(jù)的格式，即年-月-日，一種非常方便的格式。
以較低粒度查看數(shù)據(jù)
與其將數(shù)據(jù)限制在一年內(nèi)，另一種減少噪音的方法是丟棄大部分?jǐn)?shù)據(jù)，但保留固定時(shí)間間隔內(nèi)的數(shù)據(jù)（GitHub）。然后數(shù)據(jù)將涵蓋整個(gè)原始時(shí)期，但會(huì)少得多。一個(gè)明顯的方法是每周只保留一個(gè)值——換句話說，每七個(gè)值。
執(zhí)行此操作的標(biāo)準(zhǔn)技術(shù)是使用%（模數(shù)）運(yùn)算符。通過過濾每個(gè)數(shù)組索引的模 7 等于 0，我們將保留每 7 個(gè)值：
plotData(data.filter((a, index) => index % 7 == 0));
請注意，這一次，您需要使用另一種形式的filter()，它使用兩個(gè)參數(shù)，第二個(gè)參數(shù)表示索引。結(jié)果如下：
在一個(gè)圖表中查看病例和死亡人數(shù)
最后，嘗試在一張圖表 ( GitHub ) 上同時(shí)顯示病例和死亡人數(shù)。這次您需要更改plotData()方法，但方法基本相同。關(guān)鍵變化是添加了新數(shù)據(jù)：
deaths = data.map(a => a.deaths)
columns = [ keys, cases, deaths ]
并進(jìn)行調(diào)整以確保 billboard.js 正確格式化軸。請?zhí)貏e注意，屬于傳遞給bb.generate的對象的數(shù)據(jù)結(jié)構(gòu)的更改：
ata: {
x: "dates",
columns: columns,
axes: { "cases": "y", "deaths": "y2" },
types: {
cases: "bar"
}
}
現(xiàn)在，定義要繪制的多個(gè)軸以及特定于案例系列的新類型。
使用 JavaScript 繪制 API 結(jié)果
本教程演示了如何使用簡單的 API 和圖表庫在 JavaScript 中構(gòu)建基本的 COVID-19 跟蹤器。API 支持您可以在不同國家/地區(qū)使用的許多其他數(shù)據(jù)，還包括有關(guān)疫苗覆蓋率的數(shù)據(jù)。
您也可以選擇使用多種 billboard.js 圖表類型來顯示它，或者完全使用不同的圖表庫。
