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

在今天的文章中，我們將為大家介紹如何用LightningChart JS創(chuàng)建用于分類數(shù)據(jù)可視化的樹狀圖應(yīng)用程序。

JS樹狀圖

今天我們將使用LightningChart JS創(chuàng)建一個JS樹狀圖，這個示例非?？焖俸秃唵危⑶襆ightningChart JS將方便地處理繁重的編碼工作，因此我們只關(guān)注如何將數(shù)據(jù)分配給圖表。在這個示例中，我們將使用Node JS和LightningChart JS v5.2，建議您不要跳過LightningChart JS安裝部分。

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

樹狀圖圖

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

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

什么時候使用樹狀圖？

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

樹狀圖特征

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

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

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

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

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

項目概述

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

模板設(shè)置

1. 下載提供的模板來學(xué)習(xí)本教程。

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

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

CHART.ts

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

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

1. 導(dǎo)入庫

我們將從導(dǎo)入創(chuàng)建圖表所需的庫開始。

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

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

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

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

3. 屬性

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

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

創(chuàng)建數(shù)據(jù)集

treemap使用setData方法，該方法需要一個包含TreeMapUserNodes的數(shù)組，這些節(jié)點包含值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},
]},
])

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

{
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方法的幫助下，將創(chuàng)建圖表中的層次結(jié)構(gòu)。

結(jié)論

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

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

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