如何使用 JavaScript 中的 Fetch API 從 JSON 資料建立圖表？-js教程-PHP中文網

語法

參數

方法

範例#1

輸出

首頁

web前端

js教程

如何使用 JavaScript 中的 Fetch API 從 JSON 資料建立圖表？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 am 08:49 AM

在本文中，我們將探討如何在取得 JSON 資料後建立圖表。為了取得 JSON 數據，我們使用 Fetch API 的 fetch() 方法。我們將首先獲取數據，一旦數據可用，我們將其輸入系統以建立圖表。 Fetch API 提供了一個簡單的接口，用於存取和操作 HTTP 請求和回應。

語法

const response = fetch(resource [, init])

登入後複製

參數

#資源 - 這是取得資料的資源路徑。
init - 它定義任何額外的選項，例如標題、正文等。

方法

< p>步驟可以定義如下-

#步驟1 - 我們將透過呼叫fetch 函數從遠端伺服器取得數據。

< strong>第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(&#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>

登入後複製

輸出

#成功執行上述程序後，它將產生美國人口的條形圖。您可以將滑鼠懸停在該欄上以查看特定年份的人口數量。也可以在下面的 gif 圖片中看到

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

以上是如何使用 JavaScript 中的 Fetch API 從 JSON 資料建立圖表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7862

Java教學

1649

CakePHP 教程

1404

Laravel 教程

1300

PHP教程

1242

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。