如何在 JavaScript 中构建 COVID-19 跟踪器

作者:匿名更新于： 2022-06-10 23:22:28

　　本指南将帮助演示使用 JavaScript 使用 API 的基础知识。您将学习如何从远程源获取数据。您还将看到如何使用图表库来显示获取的数据。

　　渴望一个新项目来磨练你的 JS 技能?试试这个使用 JavaScript 创建 COVID-19 跟踪器的教程。

　　正在寻找一个快速项目来练习您的 Web 开发技能?在整个新冠大流行期间，您可能已经看到了许多不同的 COVID 追踪器和图表——以下是如何以最少的努力制作自己的追踪器。

　　您将学习 JavaScript 中的一些有用技术，包括如何从 API 获取远程数据以及如何使用图表库来显示它。让我们开始吧。你将要建造什么

　　本指南将帮助演示使用 JavaScript 使用 API 的基础知识。您将学习如何从远程源获取数据。您还将看到如何使用图表库来显示获取的数据。

　　本文中使用的所有代码都可以在Github存储库中找到。

　　探索数据源

　　为了获得与 COVID 相关的最新数据，我们将使用disease.sh，它自称为“开放疾病数据 API”。

　　这个 API 非常棒，因为：

　　它有许多不同的数据源，每一个都提供略有不同的格式

　　它有据可查，没有示例，但有很多关于每个disease.sh端点如何工作的详细信息

　　它返回 JSON，这很容易在 JavaScript 中使用

　　它完全开放且免费使用，无需身份验证

　　最后一点特别重要：许多 API 要求您通过复杂的 OpenAuth 过程，或者根本不适用于在浏览器中运行的 JavaScript。

　　在本教程中，我们将使用来自 disease.sh 的美国纽约时报数据。该端点包括大流行期间(自 2020 年 1 月 21 日起)的数据，格式易于使用。看看我们将使用的disease.sh 平台的一些数据：

　　如果您习惯于处理 JSON，则可以毫无问题地阅读它。这是更易读的布局中的一小段摘录：

　　复制

　　1. [{

　　2. "date":"2020-01-21",

　　3. "cases":1,

　　4. "deaths":0,

　　5. "updated":1643386814538

　　6. },{

　　7. "date":"2020-01-22",

　　8. "cases":1,

　　9. "deaths":0,

　　10. "updated":1643386814538

　　11. }]

　　API 返回一个简单的对象数组，每个对象代表一个带有日期、案例等的数据点。

　　设置 HTML

　　现在，我们将设置一些非常简单的骨架 HTML。最终，您需要包含一些外部资源，但这足以开始：

　　复制　　

　　1.

　　2.

　　3.

　　4.

　　5.

　　6.

      7.

>Covid cases, US

　　8.

　　9.

　　10.

　　11. 

　　使用 JavaScript 获取数据

　　首先从 API 获取数据并将其显示在浏览器控制台中。这将帮助您验证您是否可以从远程服务器获取并处理响应。将以下代码添加到您的covid.js文件中：

　　复制

　　1. var api = 'https://disease.sh/v3/covid-19/nyt/usa';

　　2. fetch(api)

　　3.  .then(response => response.json())

　　4.  .then(data => {

　　5.  console.log(data);

　　6.  });

　　Fetch JavaScript API 是 XMLHttpRequest 的更新替代品(在MDN上详细了解它)。它使用了一个 Promise，这使得带有回调的异步编程更容易一些。使用此范例，您可以将多个异步步骤链接在一起。

　　获取到所需的 URL 后，使用 Promise 的then方法处理成功案例。通过json()方法将响应的正文解析为 JSON 。

　　因为then()总是返回一个 Promise，你可以继续链接来处理每一步。现在，在第二步中，只需将数据记录到控制台，以便您可以检查它：

　　您将能够与控制台中显示的对象进行交互，以检查来自 API 的数据。你已经取得了很大的进步，所以当你准备好后继续下一步。

　　使用 billboard.js 显示数据

　　让我们使用 JavaScript 库来绘制数据，而不是记录数据。通过将之前的代码更新为如下所示为此做好准备：

　　复制

　　1. fetch(api)

　　2.  .then(response => response.json())

　　3.  .then(data => {

　　4.  plotData(data);

　　5.  });function plotData(data) {

　　6.  }

　　我们将使用billboard.js库为我们提供一个简单的交互式图表。billboard.js 是基本的，但它支持几种不同的图表类型，并允许您自定义轴、标签和图表的所有标准成分。

　　您需要包含三个外部文件，因此将它们添加到 html 的 HEAD 中：

　　复制

　　1.

　　2.

　　3. 　　

　　用最基本的图表试试 billboard.js。将以下内容添加到plotData()：

　　复制

　　1. bb.generate({

　　2. bindto: "#covid-all-us-cases",

　　3. data: {

　　4. type: "line",

　　5. columns: [

　　6. [ "data", 10, 40, 20 ]

　　7. ]

　　8. }

　　9. });

　　bindto属性定义了一个选择器，它标识要在其中生成图表的目标 HTML 元素。data 用于折线图，只有一列。注意，data 列是一个由四个值组成的数组，第一个值是一个字符串，作为该数据的名称(“data”)。

　　你应该会看到一个类似这样的图表，序列中有三个值，并有一个图例将其标记为“data”:

　　剩下要做的就是使用API 中已经传递给plotData()的实际数据。这需要更多的工作，因为您需要将其转换为适当的格式并指示 billboard.js 正确显示所有内容。

　　我们将绘制一个显示完整案例历史的图表。首先构建两列，一列用于包含日期的 x 轴，另一列用于我们将在图表上绘制的实际数据系列：

　　复制

　　1. var keys = data.map(a => a.date),

　　2. cases = data.map(a => a.cases);

　　3. keys.unshift("dates");

　　4. cases.unshift("cases");

　　剩下的工作需要调整广告牌对象。

　　复制

　　1. bb.generate({

　　2. bindto: "#covid-all-us-cases",

　　3. data: { x: "dates",strong>

　　4. type: "line", columns: [

　　5. keys,

　　6. cases

　　7. ]strong>

　　8. }

　　9. });

　　还要添加以下轴属性：

　　复制

　　1. axis: {

　　2. x: {

　　3. type: "category",

　　4. tick: {

　　5. count: 10

　　6. }

　　7. }

　　8. }

　　这可确保 x 轴仅显示 10 个日期，因此它们的间距很好。请注意，最终结果是交互式的。当您将光标移到图表上时，广告牌会在弹出窗口中显示数据：

　　在 GitHub中查看此跟踪器的源代码。

　　变化

　　看看如何以不同的方式使用源数据来更改使用 billboard.js 绘制的内容。

　　仅查看一年的数据

　　整个图表非常繁忙，因为它包含大量数据。减少噪音的一种简单方法是将时间段限制为一年，例如(GitHub)。你只需要改变一行就可以做到这一点，你根本不需要接触plotData函数;它通常足以处理一组减少的数据。

　　在第二个.then()调用中，替换：

　　复制

　　1. plotData(data);

　　和：

　　复制

　　1. plotData(data.filter(a => a.date > '2022'));

　　filter()方法通过对数组中的每个值调用函数来减少数组。当该函数返回true时，它会保留该值。否则，它会丢弃它。

　　如果值的日期属性大于“2022” ，上述函数将返回 true 。这是一个简单的字符串比较，但它适用于该数据的格式，即年-月-日，一种非常方便的格式。

　　以较低粒度查看数据

　　与其将数据限制在一年内，另一种减少噪音的方法是丢弃大部分数据，但保留固定时间间隔内的数据(GitHub)。然后数据将涵盖整个原始时期，但会少得多。一个明显的方法是每周只保留一个值——换句话说，每七个值。

　　执行此操作的标准技术是使用%(模数)运算符。通过过滤每个数组索引的模 7 等于 0，我们将保留每 7 个值：

　　复制

　　1. plotData(data.filter((a, index) => index % 7 == 0));

　　请注意，这一次，您需要使用另一种形式的filter()，它使用两个参数，第二个参数表示索引。结果如下：

　　在一个图表中查看病例和死亡人数

　　最后，尝试在一张图表 ( GitHub ) 上同时显示病例和死亡人数。这次您需要更改plotData()方法，但方法基本相同。关键变化是添加了新数据：

　　复制

　　1. deaths = data.map(a => a.deaths)

　　2. ...

　　3. columns = [ keys, cases, deaths ]

　　并进行调整以确保 billboard.js 正确格式化轴。请特别注意，属于传递给bb.generate的对象的数据结构的更改：

　　复制

　　1. ata: {

　　2. x: "dates",

　　3. columns: columns,

　　4. axes: { "cases": "y", "deaths": "y2" },

　　5. types: {

　　6. cases: "bar"

　　7. }

　　8. }

　　现在，定义要绘制的多个轴以及特定于案例系列的新类型。

　　使用 JavaScript 绘制 API 结果

　　本教程演示了如何使用简单的 API 和图表库在 JavaScript 中构建基本的 COVID-19 跟踪器。API 支持您可以在不同国家/地区使用的许多其他数据，还包括有关疫苗覆盖率的数据。

　　您也可以选择使用多种 billboard.js 图表类型来显示它，或者完全使用不同的图表库。

　　来源： Linux公社

  　　>>>>>>点击进入编程语言专题