极客教程JavaScript 使用Fetch GET请求从JSON数据创建图表的代码
在本文中，我们将使用 Fetch API 的 Fetch() 方法通过获取 JSON 数据来创建一个简单的图表。Fetch API 允许我们以更简单的方式进行 HTTP 请求。
fetch() 方法： fetch() 方法用于获取资源，返回一个promise对象，一旦响应可用，promise对象将会被实现。
语法：
const response = fetch(resource [, init])
参数：
- resource： 资源的路径（也可以是本地文件）
- init： 你想要添加的任何其他选项，比如头部、正文、方法等等。
方法： 步骤如下所示：
步骤1： 第一步是通过指定资源的路径调用fetch函数。在本例中，我们将使用以下URL中的免费资源：
“https://datausa.io/api/data?drilldowns=Nation&measures=Population”
它包含了美国在不同年份的人口。下面是Response对象的示例：
Response {
type: “cors”,
URL: “https://datausa.io/api/data?drilldowns=Nation&measures=Population”,
redirected: false,
status: 200,
ok: true,
statusText: “OK”,
headers: Headers,
body: ReadableStream,
bodyUsed: true
}
body: ReadableStream { locked: true }
bodyUsed: true
headers: Headers { }
ok: true
redirected: false
status: 200
statusText: “OK”
type: “cors”
url: “https://datausa.io/api/data?drilldowns=Nation&measures=Population”
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }
步骤2： 然后，我们将在数据流中获得一个结果。我们将查看以下JSON数据：
Object { data: (7) […], source: (1) […] }
data: Array(7) [ {…}, {…}, {…}, … ]
0: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2019, …
}
”ID Nation”: “01000US”
“ID Year”: 2019
Nation: “United States”
Population: 328239523
“Slug Nation”: “united-states”
Year: “2019”
<prototype>: Object { … }
1: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2018, …
}
2: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2017, …
}
3: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2016, …
}
4: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2015, …
}
5: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2014, …
}
6: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2013, …
}
length: 7
<prototype>: Array []
source: Array [ {…} ]
<prototype>: Object { … }
正如您所看到的，我们有一个长度为7的数组。每个对象都有几个属性。在这些属性中，我们只是使用for循环将两个属性即Year和Population存储到两个不同的数组中。
步骤3： 最后一步是根据接收到的数据创建一个图表。我们使用的是chart.js，它是在网站上包含图表的一种简单方法。在head标签中添加CDN链接
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js”>
下面是上述方法的实现：
HTML
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">
</script>
<title>US Population Chart</title>
</head>
<body>
<canvas id="bar-chart" width="800" height="450">
</canvas>
<script>
getData();
async function getData() {
const response = await fetch(
'https://datausa.io/api/data?drilldowns=Nation&measures=Population');
console.log(response);
const data = await response.json();
console.log(data);
length = data.data.length;
console.log(length);
labels = [];
values = [];
for (i = 0; i < length; i++) {
labels.push(data.data[i].Year);
values.push(data.data[i].Population);
}
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd",
"#8e5ea2",
"#3cba9f",
"#e8c3b9",
"#c45850",
"#CD5C5C",
"#40E0D0"],
data: values
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'U.S population'
}
}
});
}
</script>
</body>
</html>
输出：
