在本文中，我们将探讨如何在获取 json 数据后创建图表。为了获取 json 数据，我们使用 fetch api 的 fetch() 方法。我们将首先获取数据，一旦数据可用，我们将其输入系统以创建图表。 fetch api 提供了一个简单的接口，用于访问和操作 http 请求和响应。
语法const response = fetch(resource [, init])
参数资源 - 这是获取数据的资源路径。
init - 它定义任何额外的选项，例如标题、正文等。
方法步骤可以定义如下 -
步骤 1 - 我们将通过调用 fetch 函数从远程服务器获取数据。
第1步 - 一旦数据可用，我们会将其输入系统。
第3步 - 在chart js库的帮助下，我们将形成图表。
示例#1在下面的示例中，我们从远程服务器获取数据，然后创建所需的图表。美国人口数据是从服务器获取的。
#index.html
实时演示
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"> </script> <title>population chart</title></head><body> <h1 style="color: green;"> welcome to tutorials point </h1> <div style="width: 800, height: 600"> <canvas id="bar-chart"> </canvas> </div><script> getdata(); async function getdata() { const response = await fetch('https://datausa.io/api/data?drilldowns=nation&measures=population'); 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: ["#3a90cd", "#8e5ea2", "#3bba9f", "#e8c3b9", "#c45850", "#cd9c5c", "#40e0d0"], data: values } ] }, options: { legend: { display: false }, title: { display: true, text: 'u.s population' } } }); }</script></body></html>
输出成功执行上述程序后，它将生成美国人口的条形图。您可以将鼠标悬停在该栏上以查看特定年份的人口数量。也可以在下面的 gif 图片中看到
以上就是如何使用 javascript 中的 fetch api 从 json 数据创建图表？的详细内容。