圓打包圖是一種常見的數據可視化技術，用于通過嵌套圓表示按層次結構組織的數據。由于樹狀圖的相似性，樹狀圖將嵌套矩形用于相同的目的，因此有時它被稱為圓形樹狀圖。美國數學家威廉·瑟斯頓(William Thurston)于1985年引入數據分析，圓填料極大地揭示了數據的層次結構。
我想展示如何在JavaScript的幫助下輕松構建一個優雅的交互式圓圈包裝圖!在這個循序漸進的教程中，我們將代表2022年全球100位最富有的人，根據福布斯的億萬富翁名單，按國家和行業劃分。所以，把你的包裝做好，準備好，因為你的大腦會變得稍微豐富一些！
將要創建的圓形包裝圖
讓我演示一下我們的 JavaScript 圓圈包裝圖在完成后會是什么樣子。它將是交互式的，完成本教程后，您將完全能夠在自己的圓圈包裝圖中快速可視化自己的數據。
現在，讓我們繼續制作它！
帶有腳本的基本圓包裝圖
即使不是必需的，但對HTML，CSS和JavaScript有一些先驗知識將使掌握這些概念變得特別容易。但是，即使您是一個完全的新手，也沒有必要驚慌失措。當我們完成時，您將學習如何自己制作圓形包裝圖，因為我們將深入討論每個步驟。
任何 JavaScript 圖表，包括我們的圓形包裝圖，都可以通過四個常規步驟創建：準備網頁、包括所有必要的 JS 文件、加載數據、編寫一些圖表代碼。讓我們更詳細地探討這些步驟，以準備一個令人驚嘆的交互式基于JS的圓圈包裝圖。
1. 準備網頁
首先，我們需要一個圓形包裝圖的位置。
如果您還沒有網頁，請構建它。在那里，通過添加具有唯一ID的HTML塊元素為繪圖創建一個容器。此外，為此元素指定一些 CSS 規則，以定義圖表的顯示方式。
以下是我的 HTML 頁面的外觀：
在我的示例中，塊元素是 。其 ID 是 。和屬性設置為100%，而和設置為0，這將使圓形包裝圖在整個頁面中顯示；但是歡迎您定義所有內容，無論您認為自己適合您的情況。
<div>container width height margin padding
2. 包含所有必要的 JS 文件
接下來，我們需要在本節中引用所有必要的 JavaScript 文件。<head>
當您使用正確的數據可視化工具時，創建圓形包裝圖不會像它可能的那樣困難或耗時。在本教程中，我選擇使用任何圖表JS圖表。它是為數不多的JavaScript圖表庫之一，支持開箱即用的圓形包裝圖表，并且對初學者友好，因為它提供了大量現成的示例，并具有完整的文檔。
要添加所需的 JavaScript 文件，我們有兩種選擇：本地下載或從內容交付網絡 (CDN) 使用它們。讓我們選擇第二個。添加用于圖表的“核心”和“圓”包裝腳本。另外，如果您要可視化文件中的數據(在本例中為我所示)，請包括數據適配器模塊以方便數據加載。JS代碼本身將放在該部分的標記中(也可以在部分中設置)。<script><body><head>
以下是我當前的HTML頁面：
京公網安備 11010802030320號