使用JavaScript構建樹形圖
樹形圖視覺化廣泛用於分層資料分析。如果你沒有經驗還想建立一個,那將會有些複雜。下面是一個詳細教程,教你如何使用JavaScript建立互動式樹形圖。
宇宙中只有我們嗎?我們每個人都曾在某個時候問過自己這個問題。當我們在考慮地球是否是宇宙中唯一可居住的行星時,我們可能會思考宇宙究竟有多大。讓我們在樹形圖的幫助下看看吧!在本教程中,我們將使用樹形映射出宇宙中已知的10個最大的星系。
什麼是樹形圖?
在進入教程之前,瞭解一下樹形圖的概念。樹形圖是一種流行的技術,用於將分層組織、樹狀結構的資料視覺化。它可以一目瞭然地展示出層次結構以及各個資料點的值,它使用了大小與相應數量成比例的巢狀矩形。
樹的每個分支都是一個矩形,對於子分支,其中嵌套了較小的矩形。通過顏色和接近度顯示資料,樹形圖可以輕鬆表示大量資料,同時有效利用空間,非常適合比較層次結構中的比例。
樹形圖型別是由Ben Shneiderman教授發明的,他在資訊設計和人機互動領域作出了重大貢獻。樹形圖被用於許多資料視覺化領域,可用於分析股票市場、人口普查系統和選舉統計資料,以及資料新聞、硬碟探索工具等。
瀏覽JS樹形圖
下面將使用JavaScript構建一個樹形圖來比較已知宇宙中排名前10的星系的大小。JS樹狀圖在本教程結束時的樣子:
建立一個基本的JS樹形圖
建立基於JavaScript的樹狀圖通常需要以下四個基本步驟:
1. 建立一個HTML頁面
2. 參考JavaScript檔案
3. 設定資料
4. 編寫一些JS樹程式碼
如果你是 HTML、CSS 和JavaScript方面的新手,請不要擔心。本文將詳細介紹每一步,在學習完本教程之後,你可以嘗試去做自己的JS樹狀圖。
1. 建立一個HTML頁面
首先需要建立一個基本的HTML頁面。新增一個HTML塊元素 (<div>),並將樹形圖放置其中,為其分配一個ID屬性(讓它成為“容器”),以便稍後在程式碼中引用它。
然後為 <div> 設定一些樣式。將寬度和高度屬性定義為 100%,邊距和填充為 0。當然,你可以根據自己的喜好進行更改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Treemap Chart</title> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> </body> </html>
2. 參考JavaScript檔案
接下來,需要引用所需指令碼,用這些指令碼建立樹形圖。
現在有多個JavaScript圖表庫可供選擇。建立互動式資料視覺化的基本步驟與它們中的任何一個都是差不多的。在這裡,為了說明問題,我將使用AnyChart,它支援樹形圖並有免費版本,其原始碼在GitHub上開放。
因此,要構建樹形圖,需要匯入“核心”和“樹形圖”模組。在第一步建立的HTML頁面的 head 部分中引用它們。從 CDN 獲取它們(或下載檔案)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Treemap Chart</title> <script src="http://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script src="http://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> </body> </html>
3.設定資料
設定資料後將把已知宇宙中最大的前10個星系的規模視覺化。這些星系非常龐大,所以需要以它們的直徑來衡量它們是多少光年(光年是一束光在一個地球年中傳播的距離,相當於大約 6 萬億英里)。
我已經從 Largest.org 獲取了星系尺度的資料。
對於圖表,樹結構資料根級元素是“星系”,(按星系型別)分為“橢圓”和“螺旋”作為其子元素,它們又有個別星系物件的陣列作為它們自己的子元素。
每個星系物件都具有<名稱 \ 尺度>鍵值屬性。例如,{name: "IC 1101", value: 4000000} 表示規模為 4,000,000 光年的 IC 1101 星系。說實話,很難理解它有多大。
var dataSet = [ {name: "Galaxies", children: [ {name: "Elliptical", children: [ {name: "IC 1101", value: 4000000}, {name: "Hercules A", value: 1500000}, {name: "A2261-BCG", value: 1000000}, {name: "ESO 306-17", value: 1000000}, {name: "ESO 444-46", value: 402200}, ]}, {name: "Spiral", children: [ {name: "Rubin's Galaxy", value: 832000}, {name: "Comet Galaxy", value: 600000}, {name: "Condor Galaxy", value: 522000}, {name: "Tadpole Galaxy", value: 280000}, {name: "Andromeda Galaxy", value: 220000} ]} ]} ];
4. 編寫一些JS樹形圖程式碼
到此只需幾行JavaScript程式碼就可以為樹形圖提供動力。
1.使用anychart.onDocumentReady() 函式,載入樹形圖的所有JavaScript程式碼,確保它在網頁完全載入並準備執行。
<script> anychart.onDocumentReady(function () { // JS樹對映程式碼會寫到這裡 }); </script>
2.然後,從第3步開始在樹形圖中新增我們想要視覺化的資料。
<script> anychart.onDocumentReady(function () { var dataSet = [ {name: "Galaxies", children: [ {name: "Elliptical", children: [ {name: "IC 1101", value: 4000000}, {name: "Hercules A", value: 1500000}, {name: "A2261-BCG", value: 1000000}, {name: "ESO 306-17", value: 1000000}, {name: "ESO 444-46", value: 402200}, ]}, {name: "Spiral", children: [ {name: "Rubin's Galaxy", value: 832000}, {name: "Comet Galaxy", value: 600000}, {name: "Condor Galaxy", value: 522000}, {name: "Tadpole Galaxy", value: 280000}, {name: "Andromeda Galaxy", value: 220000} ]} ]} ]; }); </script>
3.新增以下程式碼將資料轉換到圖上。
var chart = anychart.treeMap(dataSet, "as-tree");
4.新增一個標題,將圖表放入之前定義的 <div> 容器中,並使用 draw 命令顯示它。
chart.title("The 10 Largest Galaxies in the Known Universe"); chart.container("container"); chart.draw();
現在JS樹形圖基本上已經準備好了:
載入樹形圖時,只會顯示兩個圖塊,“橢圓”和“螺旋”。然後可以單擊它們,展開其各自的子星系,這就是所謂的下鑽操作。
為什麼會只有兩塊?因為預設情況下,最大深度值設定為1。這意味著一次只能看到其父級的一個級別。較低的級別是隱藏的。在第一層,將“星系”分為“橢圓”和“螺旋”,所以只能看到這一層。
顯示所有星系圖塊只需要使用maxDepth()函式更改最大深度值。
chart.maxDepth(2);
效果如下:
在這張圖表中,可以看到星系是如何根據層次結構進行分組的,還可以單擊頂部的“橢圓”或“螺旋”標題來放大其子星系。
完整程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Treemap Chart</title> <script data-fr-src="http://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script data-fr-src="http://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { // 建立資料 var dataSet = [ {name: "Galaxies", children: [ {name: "Elliptical", children: [ {name: "IC 1101", value: 4000000}, {name: "Hercules A", value: 1500000}, {name: "A2261-BCG", value: 1000000}, {name: "ESO 306-17", value: 1000000}, {name: "ESO 444-46", value: 402200}, ]}, {name: "Spiral", children: [ {name: "Rubin's Galaxy", value: 832000}, {name: "Comet Galaxy", value: 600000}, {name: "Condor Galaxy", value: 522000}, {name: "Tadpole Galaxy", value: 280000}, {name: "Andromeda Galaxy", value: 220000} ]} ]} ]; // 建立樹形圖並設定資料 var chart = anychart.treeMap(dataSet, "as-tree"); // 設定圖表標題 chart.title("The 10 Largest Galaxies in the Known Universe"); // 設定圖表的容器id chart.container("container"); // 開始繪製圖表 chart.draw(); }); </script> </body> </html>
現在,你可以一目瞭然地看到10個最大星系的規模並進行比較。下面展示如何自定義JavaScript樹形圖。
自定義JS樹形圖
A. 改變顏色
改變任何圖表的外觀和感覺有一種簡單方法就是更改顏色。
chart.normal().fill('#B46FC2'); chart.hovered().fill('#44008B', 0.8); chart.selected().fill('#0A0068', 0.8); chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);
添加了fill()和hashFill()方法來更改樹形圖的顏色。
B. 應用線性色標
在樹形圖中,除了大小,圖塊的顏色也有助於突出顯示比例。可以藉助線性色標根據相應的資料維度自動為圖塊著色。
建立一個線性色標,為其提供兩個值,一個為最低範圍值,另一個為最高值,最後啟用顏色範圍。
var customColorScale = anychart.scales.linearColor(); customColorScale.colors(['#37B8F7', '#ffcc00']); chart.colorScale(customColorScale); chart.colorRange().enabled(true); chart.colorRange().length('90%');
實現這些需要修改上一節中的程式碼。
C. 格式化標籤和工具提示
可以使用HTML來格式化標籤。為此,需要為標籤啟用 HTML。然後,你就可以不受限制地使用HTML對它們進行格式化。
可以把標籤格式化為<span>HTML元素,並對其進行樣式設計,以增加字型大小和改變顏色。
chart.labels().useHtml(true); chart.labels().format( "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}" );
正如你在上面的程式碼片段中看到的,還使用了{%name}和{%value}標記,用來更改樹形圖標籤和工具提示的文字。這樣,在建立視覺化時將為每個星系輸出名稱和比例值。
此外,使用format()方法來定製工具提示的文字。一個內容豐富的工具提示有助於更好地理解資料。
chart.tooltip().format( "Scale: {%value} light-years" );
D. 按升序排列圖塊
預設情況下,樹形圖圖塊按降序排列。可以看到星系是從高到低排列的,規模最大的IC 1101星系是左起第一個。
如果需要升序排列,那麼新增:
chart.sort("asc");
下面是一個完整 樣例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Treemap Chart</title> <script data-fr-src="http://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script data-fr-src="http://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { // create the data var dataSet = [ {name: "Galaxies", children: [ {name: "Elliptical", children: [ {name: "IC 1101", value: 4000000}, {name: "Hercules A", value: 1500000}, {name: "A2261-BCG", value: 1000000}, {name: "ESO 306-17", value: 1000000}, {name: "ESO 444-46", value: 402200}, ]}, {name: "Spiral", children: [ {name: "Rubin's Galaxy", value: 832000}, {name: "Comet Galaxy", value: 600000}, {name: "Condor Galaxy", value: 522000}, {name: "Tadpole Galaxy", value: 280000}, {name: "Andromeda Galaxy", value: 220000} ]} ]} ]; // create the treemap chart and set the data var chart = anychart.treeMap(dataSet, "as-tree"); // set the chart title chart.title("The 10 Largest Galaxies in the Known Universe"); // set a custom color scale var customColorScale = anychart.scales.linearColor(); customColorScale.colors(['#37B8F7', '#ffcc00']); chart.colorScale(customColorScale); chart.colorRange().enabled(true); chart.colorRange().length('90%'); // format the labels chart.labels().useHtml(true); chart.labels().format( "<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}" ); // format the tooltips chart.tooltip().format( "Scale: {%value} light years" ); // sort in ascending order chart.sort("asc"); // set the container id for the chart chart.container("container"); // initiate drawing the chart chart.draw(); }); </script> </body> </html>
結論
恭喜現在已經學會了輕鬆地創建出色的互動式JavaScript樹形圖!請參閱樹形圖文件 , 以 便 瞭解它還可以做些什麼,或者使用不同的圖表庫。
譯者介紹
翟珂,51CTO社群編輯,目前在杭州從事軟體研發工作,做過電商、徵信等方面的系統,享受分享知識的過程,充實自己的生活。
原文標題:How to Build a Treemap Using JavaScript,作者:Awan Shrestha
連結: http://dzone.com/articles/treemap-chart-javascript
- 視覺還原小技巧!CSS 實現角標效果
- 打破關於智慧公寓的三個誤區
- 元宇宙戰略的系統框架
- 服務配置:實現動態重新整理與配置共享
- 面試官:有了解過ReentrantLock的底層實現嗎?說說看
- 17.6K Star! 一款快速高效的包管理工具
- 專案啟動頁載入太慢?我們一起掌握幾個優化方案!
- 七個好用的裝飾器
- 在學校教學 Python 程式設計的理想 IDE
- 不買排名,不去SEO,如何做到登上谷歌搜尋首頁?
- TIOBE 2022 年 5 月程式語言排行榜:C# 準備衝擊前 3?
- 不再流行的Perl,會消失嗎?
- 網路犯罪集團將兩大勒索組織收入麾下
- 常用惡意軟體分析方法及工具彙總
- 如何用 RabbitMQ 解決分散式事務?
- 客觀評價 增長趨勢比 Vite 還猛的 TailwindCSS
- HtmlParse:一款超輕量級的HTML檔案解析和爬取工具
- 檔案管理器標籤頁真的來了!Windows 11新特性一覽
- 淺談政府機構數字化轉型
- Pandas 實用技能,資料篩選 query 函式詳細介紹