1. 什么是 Fetch API？
Fetch API 是 JavaScript 新一代的网络请求 API，它是用于替代 XMLHttpRequest(XHR) 的一种方案。该 API 使用 Promise，并且支持 async/await 语法糖，从而可以更加方便地进行网络请求。
下面是一个基础的使用 Fetch API 发送 GET 请求的例子：
fetch('https://api.example.com/data')
.then(response => response.json()) // 解析响应数据
.then(data => console.log(data)) // 打印解析后的数据
.catch(error => console.error(error)) // 捕获异常
1.1 Fetch API 的优点
相比于 XHR，Fetch API 有以下优点：
使用 Promise 可以更加优雅地处理异步请求；
支持 async/await 语法糖，代码更加简洁易读；
使用者可以在任何时候将请求取消（使用 AbortController）；
默认不会携带 Cookie，更加安全；
可以使用 Service Worker 进行缓存，加速请求速度。
1.2 JSON 数据格式介绍
在本文中，我们将使用 Fetch API 请求 JSON 格式的数据，并将其转换为图表。下面是一个基础的 JSON 数据格式：
{
"name": "John",
"age": 30,
"city": "New York"
}
JSON 格式由键值对组成，每个键值对之间用逗号隔开。键必须是字符串类型，值可以是字符串、数字、布尔值、数组、对象或 null。
2. 创建图表的准备工作
在本文中，我们将使用 Chart.js 创建图表，因此我们需要在 HTML 文件中引用对应的库文件和一个用于展示图表的 canvas 元素：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fetch API 创建图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="app.js"></script>
</body>
</html>
在 JavaScript 代码中，我们需要获取 canvas 元素并实例化 Chart.js 对象：
const canvas = document.getElementById('myChart')
const ctx = canvas.getContext('2d')
const chart = new Chart(ctx, {
type: 'bar',
data: {},
options: {}
})
上面的代码使用了 bar 类型的图表，我们也可以使用其他类型，如 line、pie、doughnut 等。更多的信息可以在 Chart.js 文档 中找到。
3. 从 JSON 数据创建图表
在本节中，我们将使用 Fetch API 请求 JSON 数据，并使用 Chart.js 将其转换为图表。
3.1 使用 Fetch API 获取 JSON 数据
我们将使用一个示例数据，其中包含了每个月的销售量和利润。数据的格式如下：
{
"sales": [120, 180, 150, 200, 170, 220, 230, 280, 250, 270, 320, 300],
"profits": [20, 50, 30, 70, 60, 80, 90, 120, 100, 110, 150, 130]
}
我们可以使用 Fetch API 获取该数据，然后使用 response.json() 解析成 JavaScript 对象：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => console.error(error))
如果数据请求成功并解析成对象，那么将在控制台输出如下内容：
{
"sales": [120, 180, 150, 200, 170, 220, 230, 280, 250, 270, 320, 300],
"profits": [20, 50, 30, 70, 60, 80, 90, 120, 100, 110, 150, 130]
}
3.2 将 JSON 数据转换为 Chart.js 所需数据格式
由于 Chart.js 所需的数据格式和我们从服务器中获取的 JSON 数据不同，因此需要进行转换。
比如，Chart.js 所需的数据格式如下：
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
datasets: [
{
label: 'Sales',
data: [120, 180, 150, 200, 170, 220, 230, 280, 250, 270, 320, 300],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
},
{
label: 'Profits',
data: [20, 50, 30, 70, 60, 80, 90, 120, 100, 110, 150, 130],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
}
我们需要按照上面的格式将获取到的 JSON 数据转换成 Chart.js 所需格式，其中 labels 表示 X 轴的标签，datasets 表示 Y 轴的数据集合，可以包含多个数据集合。
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
const chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Sales',
data: data.sales,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
},
{
label: 'Profits',
data: data.profits,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
}
console.log(chartData)
})
.catch(error => console.error(error))
上面的代码中，我们将获取到的 sales 和 profits 数据分别放在 Chart.js 数据格式的 datasets 中。
3.3 在页面上绘制图表
现在我们已经准备好了 Chart.js 所需的数据格式，可以在页面上绘制图表了。
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
const chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Sales',
data: data.sales,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
},
{
label: 'Profits',
data: data.profits,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
}
const canvas = document.getElementById('myChart')
const ctx = canvas.getContext('2d')
const chart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: 'Sales and Profits in 2021'
}
}
})
})
.catch(error => console.error(error))
上面的代码中，我们将 Chart.js 所需的数据格式 chartData 传递给了 chart 对象的 data 属性，然后对图表进行了一些配置，如使图表可以响应窗口大小改变、在 Y 轴显示的数据从 0 开始、添加一个标题等等。
如果一切正常，将会在页面上看到如下的图表：
4. 总结
本文介绍了如何使用 JavaScript 中的 Fetch API 从 JSON 数据创建图表。首先，我们介绍了 Fetch API 的优点和 JSON 数据格式。接着，我们学习了如何使用 Chart.js，该库可以将数据转换为图表并进行基本的配置。最后，我们将 Fetch API 获取到的 JSON 数据转换成 Chart.js 所需的格式，并在页面上展示了一个示例图表。
了解如何使用 Fetch API 请求数据和使用 Chart.js 创建图表是前端开发中必不可少的技能之一，希望本文对读者有所帮助。