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