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

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

JS樹(shù)狀圖

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

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

樹(shù)狀圖圖

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

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

什么時(shí)候使用樹(shù)狀圖？

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

樹(shù)狀圖特征

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

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

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

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

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

項(xiàng)目概述

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

模板設(shè)置

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

2. 下載模板后，您會(huì)看到如下的文件樹(shù)：

3. 打開(kāi)一個(gè)新終端，運(yùn)行npm install命令。

CHART.ts

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

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

1. 導(dǎo)入庫(kù)

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

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

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

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

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

3. 屬性

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

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

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

treemap使用setData方法，該方法需要一個(gè)包含TreeMapUserNodes的數(shù)組，這些節(jié)點(diǎn)包含值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é)點(diǎn)可以有更多的嵌套節(jié)點(diǎn)，從而生成更復(fù)雜的樹(shù)圖。在圖表的代碼中，我們可以找到嵌套數(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 },
],
},

 基本上，您需要一個(gè)源，該源以本例中使用的格式提供JSON對(duì)象，并且在setData方法的幫助下，將創(chuàng)建圖表中的層次結(jié)構(gòu)。

結(jié)論

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

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

LightningChart JS幫助我們完成最困難的工作的地方，因?yàn)橹恍枰峁┟總€(gè)層/類別的數(shù)值，這樣它就可以立即生成地圖。顯然，我們必須非常小心處理節(jié)點(diǎn)的結(jié)構(gòu)，因?yàn)橛绣e(cuò)誤的結(jié)構(gòu)可能會(huì)阻止映射的生成。