Comment créer un graphique à partir de données JSON à l'aide de l'API Fetch en JavaScript ?-js tutoriel-php.cn

Comment créer un graphique à partir de données JSON à l'aide de l'API Fetch en JavaScript ?

WBOY

Libérer： 2023-08-24 08:49:09

avant

773 Les gens l'ont consulté

Dans cet article, nous explorerons comment créer un graphique après avoir obtenu des données JSON. Pour obtenir des données JSON, nous utilisons la méthode fetch() de l'Fetch API. Nous obtiendrons d’abord les données et une fois disponibles, nous les saisirons dans le système pour créer le graphique. L'API Fetch fournit une interface simple pour accéder et manipuler les requêtes et réponses HTTP.

Syntaxe

const response = fetch(resource [, init])

Copier après la connexion

Paramètres

Ressources - Il s'agit du chemin de ressource pour obtenir les données.
init - Il définit toutes les options supplémentaires telles que le titre, le corps, etc. Les étapes de la

méthode

< p> peuvent être définies comme suit -

Étape 1 - Nous obtiendrons les données du serveur distant en appelant la fonction fetch.

< strong>Étape 1 - Une fois les données disponibles, nous les saisissons dans le système.

Étape 3 - Avec l'aide de la bibliothèque Chart JS, nous formerons le graphique.

Exemple n°1

Dans l'exemple ci-dessous, nous obtenons les données d'un serveur distant, puis créons le graphique requis. Les données sur la population américaine sont obtenues à partir du serveur.

#index.html

Démonstration en direct

<!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(&#39;https://datausa.io/api/data?drilldowns=Nation&measures=Population&#39;);
      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: &#39;bar&#39;,
         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: &#39;U.S population&#39;
            }
         }
      });
   }
</script>
</body>
</html>

Copier après la connexion

Sortie

Après avoir exécuté avec succès le programme ci-dessus, il générera un graphique à barres de la population américaine. Vous pouvez passer votre souris sur la barre pour voir le décompte de la population pour une année spécifique. Vous pouvez également le voir dans le gif ci-dessous

如何使用 JavaScript 中的 Fetch API 从 JSON 数据创建图表？