LightningChart JS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用于貿易，工程，航空航天，醫藥和其他領域的應用。

在今天的文章中，我們將為大家介紹如何用LightningChart JS創建用于分類數據可視化的樹狀圖應用程序。

JS樹狀圖

今天我們將使用LightningChart JS創建一個JS樹狀圖，這個示例非常快速和簡單，并且LightningChart JS將方便地處理繁重的編碼工作，因此我們只關注如何將數據分配給圖表。在這個示例中，我們將使用Node JS和LightningChart JS v5.2，建議您不要跳過LightningChart JS安裝部分。

您可以獲得免費的LC JS授權許可，如有任何問題可來電詳詢：023-68661681，在開始編寫代碼之前，有必要了解一下JS樹狀圖背后的一些理論。

樹狀圖圖

樹狀圖是一種可視化形式，其中結構通過嵌套矩形分層表示。識別數據模式很有用，因為根據數據量，樹的分支在大小上用矩形表示。

這個想法源于計算機科學家本·施奈德曼，他試圖創造一種方法來查看他電腦上龐大的文件目錄，而不會占用屏幕上太多的空間。這有助于改善空間，使其更容易閱讀和理解。

什么時候使用樹狀圖？

在Ben的例子中，當我們有大量的數據需要顯示和組織時，可以考慮使用這個圖表，它的分支和子分支使我們更容易比較和分類模式。在這個圖表中，我們可以有層，這些層對數據類別進行子分類，允許在不停止相關的情況下顯示n個級別的信息。

樹狀圖特征

樹狀圖的一個方面是顏色主題以及這些顏色如何與所表示的數據直接相關，換句話說，我們可以從非常淺的顏色作為第一層次開始，然后下降到較深的顏色，讓觀眾專注于較淺的顏色。第二個特征是矩形(又名分支或節點)，矩形越大，表示的數據量就越大。

此外，還可以對節點進行子類分類，將其命名為“葉子”。這些節點的排列方式從圖表的左上角移動到右下角：

作為最后一個也是第三個特征，我們有層次結構，從而表示可以在圖表中找到的層。在用輔助數據對主要數據進行分類、嵌套矩形以形成分層級別、在圖上形成組和子組時，可以表示層。

樹狀圖通常用于表示有限空間內的大量離群數據，顯示包含類別、顏色和大小的趨勢和子組，從而更容易識別模式。

這張圖表對客戶投資組合分析很有用，例如，查看地理區域的市場細分或財務分析，有助于顯示不同的股票品牌、匯率等。

項目概述

下面的JavaScript樹狀圖是最近在LightningChart JS v.5.2中引入的，它是一個交互式樹狀圖，具有不同的UI功能，使它看起來像一個更健壯的獨立樹狀圖應用程序，而不僅僅是另一個樹狀圖。

模板設置

1. 下載提供的模板來學習本教程。

2. 下載模板后，您會看到如下的文件樹：

3. 打開一個新終端，運行npm install命令。

CHART.ts

目前最新的版本是LightningChart JS 5.2.0和XYData 1.4.0，我們建議您查看最新版本并進行更新，這是因為一些LightningChart JS工具在以前的版本中不存在。在項目的packag.json文件中，您可以找到LightningChart JS依賴項：

"dependencies": {
"@arction/lcjs": "^5.1.0",
"@arction/xydata": "^1.4.0",
"webgl-obj-loader": "^2.0.8",
}

1. 導入庫

我們將從導入創建圖表所需的庫開始。

// Import LightningChartJS
const lcjs = require('@arction/lcjs')
const { lightningChart, BarChartSorting, LegendBoxBuilders, Themes } = lcjs

2. 添加授權許可密鑰(免費)

安裝LightningChart JS庫之后，我們將把它們導入到chart.ts文件中。注意，您將需要試用許可證，這是免費的。然后將其添加到一個變量中，該變量將用于創建JavaScript 2D Bubble Chart對象。

let license = undefined
try {
license = 'xxxxxxxxxxxxx'
} catch (e) {}

3. 屬性

}).TreeMapChart({
theme: Themes.turquoiseHexagon,
})

• ：用于可視化樹狀圖的chart類。
• ：定義JS樹狀圖的外觀和感覺，注意您必須事先指定圖標組件的顏色主題。
• ：將名稱設置在圖表頂部。

創建數據集

treemap使用setData方法，該方法需要一個包含TreeMapUserNodes的數組，這些節點包含值name和值data。

treeMap.setData([
{ name: 'Category 1', value: 10},
{ name: 'Category 2', value: 12},
{ name: 'Category 3', children: [
{ name: 'Category 3.1', value: 6},
{ name: 'Category 3.2', value: 12},
]},
])

這些節點可以有更多的嵌套節點，從而生成更復雜的樹圖。在圖表的代碼中，我們可以找到嵌套數組：

{
name: 'TECHNOLOGY',
children: [
{ name: 'MSFT', value: 60.34 },
{ name: 'AAPL', value: 52.75 },
{ name: 'ORCL', value: 31.25 },
{ name: 'ADBE', value: 81.71 },
{ name: 'NVDA', value: 252.82 },
{ name: 'AVGO', value: 104.86 },
{ name: 'CRM', value: 104.83 },
{ name: 'INTU', value: 66.01 },
],
},
{
name: 'COMMUNICATION SERVICES',
children: [
{ name: 'GOOG', value: 63.0 },
{ name: 'META', value: 206.14 },
{ name: 'NFLX', value: 75.84 },
{ name: 'DIS', value: 7.27 },
],
},

基本上，您需要一個源，該源以本例中使用的格式提供JSON對象，并且在setData方法的幫助下，將創建圖表中的層次結構。

結論

最后，要運行這個圖表，只需要打開一個新的終端并運行NPM START命令，您就可以在本地服務器(通常是HTTP://localhost:8080/)上可視化JS樹狀圖應用程序了！

盡管樹狀圖看起來過于簡單而難以創建，但它并沒有降低其對分析分層數據的重要性。這種類型的圖表使我們能夠識別按類別分組的一組數據中兩個或多個元素的關系和模式。

LightningChart JS幫助我們完成最困難的工作的地方，因為只需要提供每個層/類別的數值，這樣它就可以立即生成地圖。顯然，我們必須非常小心處理節點的結構，因為有錯誤的結構可能會阻止映射的生成。