Heim >Web-Frontend >js-Tutorial >Wie erstelle ich ein Diagramm aus JSON-Daten mithilfe der Fetch-API in JavaScript?

Wie erstelle ich ein Diagramm aus JSON-Daten mithilfe der Fetch-API in JavaScript?

WBOYnach vorne: 2023-08-24 08:49:09812Durchsuche

In diesem Artikel erfahren Sie, wie Sie ein Diagramm erstellen, nachdem Sie JSON-Daten erhalten haben. Um JSON-Daten abzurufen, verwenden wir die fetch()-Methode der Fetch-API. Wir holen uns zunächst die Daten ein und geben sie, sobald sie verfügbar sind, in das System ein, um das Diagramm zu erstellen. Die Fetch-API bietet eine einfache Schnittstelle für den Zugriff und die Bearbeitung von HTTP-Anfragen und -Antworten.

Syntax

const response = fetch(resource [, init])

Parameter

Ressourcen – Dies ist der Ressourcenpfad zum Abrufen der Daten.
init – Es definiert alle zusätzlichen Optionen wie Titel, Text usw. Die Schritte der

Methode

können wie folgt definiert werden:

Schritt 1 – Wir erhalten die Daten vom Remote-Server, indem wir die Abruffunktion aufrufen.

Schritt 1 - Sobald die Daten vorliegen, geben wir diese in das System ein.

Schritt 3 – Mit Hilfe der Chart JS-Bibliothek erstellen wir das Diagramm.

Beispiel Nr. 1

Im folgenden Beispiel erhalten wir Daten von einem Remote-Server und erstellen dann das erforderliche Diagramm. Die US-Bevölkerungsdaten werden vom Server abgerufen.

#index.html

Live-Demonstration

<!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>

Ausgabe

Nach erfolgreicher Ausführung des obigen Programms wird ein Balkendiagramm der US-Bevölkerung erstellt. Sie können mit der Maus über die Leiste fahren, um die Bevölkerungszahl für ein bestimmtes Jahr anzuzeigen. Sie können es auch im GIF unten sehen

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Diagramm aus JSON-Daten mithilfe der Fetch-API in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erstellen Sie plattformübergreifende Mobilspiele mit JavaScript und Phaser.jsNächster Artikel：Erstellen Sie plattformübergreifende Mobilspiele mit JavaScript und Phaser.js

In Verbindung stehende Artikel

Mehr sehen