在本文中,我們將探討如何在取得 JSON 資料後建立圖表。為了取得 JSON 數據,我們使用 Fetch API 的 fetch() 方法。我們將首先獲取數據,一旦數據可用,我們將其輸入系統以建立圖表。 Fetch API 提供了一個簡單的接口,用於存取和操作 HTTP 請求和回應。
const response = fetch(resource [, init])
#資源 - 這是取得資料的資源路徑。
init - 它定義任何額外的選項,例如標題、正文等。
#步驟1 - 我們將透過呼叫fetch 函數從遠端伺服器取得數據。
第1步 - 一旦資料可用,我們會將其輸入系統。
第3步 - 在Chart JS函式庫的幫助下,我們將形成圖表。
在下面的範例中,我們從遠端伺服器取得數據,然後建立所需的圖表。美國人口數據是從伺服器取得的。
#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 資料建立圖表?的詳細內容。更多資訊請關注PHP中文網其他相關文章!