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

LightningChart JS提供了堆疊條形圖，用于輕松創(chuàng)建具有可定制功能的數(shù)據(jù)應(yīng)用程序。

JavaScript堆疊條形圖

當(dāng)看到來自不同類別或彼此值的大量數(shù)據(jù)時(shí)，堆疊條形圖非常有用。我們可以看到一個(gè)類別是如何被分成幾個(gè)部分的，從最大到最小的部分相對于總量，堆疊條形圖有兩種類型：

簡單的堆疊條形圖將每個(gè)值連續(xù)地放在一個(gè)段中，條形圖的總價(jià)值就是該段的總價(jià)值，它是比較片段之間總數(shù)量的理想方法。

100%堆疊條形圖顯示了每個(gè)細(xì)分市場中每個(gè)類別的總百分比，并用每個(gè)值占該細(xì)分市場總數(shù)量的百分比表示，這使得我們更容易看到各組數(shù)量的百分比差異。

根據(jù)數(shù)據(jù)分析的目標(biāo)，我們可以根據(jù)可視化需求評估每個(gè)數(shù)據(jù)的有用性。在這種情況下，JavaScript堆疊條形圖對于任何類型的用戶來說都很容易理解。JavaScript堆疊條形圖的另一個(gè)特性是以多色條形顯示數(shù)據(jù)，其中每個(gè)條形代表一個(gè)主要類別，每種顏色代表一個(gè)次要維度，這使我們能夠方便地查詢每個(gè)段類別的次要維度及其關(guān)系之間的關(guān)系。

項(xiàng)目概述

在本文中，我們將解釋100%堆疊條形圖，并使用LightningChart JS和Node JS創(chuàng)建堆疊條形圖。請記住，您可以下載這個(gè)項(xiàng)目的模板并試用它，

模板設(shè)置

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

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

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

CHART.ts

今天最新的版本是LightningChart JS 5.1.0和，建議您查看最新版本就并進(jìn)行更新，因?yàn)橐恍㎜ightningChart JS工具在以前的版本中不存在。

在項(xiàng)目的package.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)入庫

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

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

2. 添加許可密鑰(免費(fèi))

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

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

3. 屬性

LightningChart JS為您提供了完全自定義圖表對象屬性的可能性，將使用以下屬性來創(chuàng)建這個(gè)JavaScript堆疊條形圖：

const barChart = lightningChart({license: license})
.BarChart({
theme: Themes.cyberSpace,
})
.setTitle('% of market share by mobile OS in 1999-2021')
.setValueLabels(undefined)
.setCursorResultTableFormatter((builder, category, value, bar) => {
builder.addRow('OS:', bar.subCategory).addRow('Share:', String(value), '%')
return builder
})

– ：定義JavaScript堆疊條形圖的外觀和感覺，注意您必須事先指定圖表組件的顏色主題。

– ：當(dāng)光標(biāo)指向本系列時(shí)，配置光標(biāo)懸停結(jié)果表的格式，結(jié)果表將顯示為一個(gè)帶有數(shù)據(jù)值的彈出框。

每一行被生成為一行(.addrow)，我們可以用需要的文本對其進(jìn)行格式化。子類別和值屬性對應(yīng)于分配給圖表的數(shù)據(jù)。子類別包含圖表的類別或分組的名稱，Value包含按類別堆疊的每個(gè)條的值。

.setCursorResultTableFormatter((builder, category, value, bar) => {
builder.addRow('OS:', bar.subCategory).addRow('Share:', String(value), '%')

4. 類別和堆疊欄

要將類別和堆疊條形圖添加到JavaScript堆疊條形圖中，我們將使用setdatastack函數(shù)，這個(gè)函數(shù)允許添加水平軸分組和屬于每個(gè)分組的類別。值數(shù)組中的值將按照其連續(xù)順序?qū)?yīng)于分組，例如值51將對應(yīng)于組2004，每個(gè)類別將堆疊在另一個(gè)類別之上，但值將根據(jù)其位置和匹配組進(jìn)行排序。

barChart.setDataStacked(
['1999', '2004', '2009', '2014', '2019', '2021'],
[
{ subCategory: 'Symbian OS', values: [1, 51, 43, 0, 0, 0] },
{ subCategory: 'Palm OS', values: [66, 18, 1, 0, 0, 0] },
{ subCategory: 'BlackBerry OS', values: [1, 7, 20, 0.5, 0, 0] },
{ subCategory: 'Windows Mobile', values: [20, 13, 7, 2, 0, 0] },
{ subCategory: 'iOS', values: [0, 0, 15, 19, 14, 27] },
{ subCategory: 'Android', values: [0, 0, 8, 77, 82, 72] },
{ subCategory: 'Other', values: [12, 11, 6, 1.5, 4, 1] },
],
)

5. LegendBox

最后我們將添加圖例框，通過顏色指示類別，并在單擊它們時(shí)隱藏想要的類別。

const legend = barChart
.addLegendBox(LegendBoxBuilders.VerticalLegendBox)
.setAutoDispose({
type: 'max-width',
maxWidth: 0.3,
})
legend.add(barChart)

圖例框可以橫向和縱向添加，此圖例框可以在滿足條件時(shí)自動(dòng)刪除，例如超過相對于圖表大小的最大寬度，當(dāng)圖表分辨率太小或當(dāng)圖表太大時(shí)釋放內(nèi)存時(shí)，這很有用。

6. 初始化圖表

最后，在終端中運(yùn)行npm start命令來可視化本地服務(wù)器上的JavaScript堆疊條形圖。

結(jié)論

JavaScript堆疊條形圖是一種幫助我們更有效地可視化數(shù)據(jù)的資源，因為它能夠輕松地表示復(fù)雜的數(shù)據(jù)集。即使這種類型的圖表可能并不總是在所有儀表板報(bào)告中使用或看到，它也是簡化按組或類別顯示大量數(shù)據(jù)的一個(gè)很好的資源。

在這種情況下，LightningChart JS為我們提供了一個(gè)簡單實(shí)用的圖表組件：JavaScript堆疊條形圖，同樣我們不必過于擔(dān)心用于開發(fā)圖表應(yīng)用程序的代碼。

只需向我們的對象提供一個(gè)數(shù)據(jù)數(shù)組，就可以創(chuàng)建帶有所有動(dòng)畫和可用控件的JavaScript堆疊條形圖:

barChart.setDataStacked(
['1999', '2004', '2009', '2014', '2019', '2021'],
[
{ subCategory: 'Symbian OS', values: [1, 51, 43, 0, 0, 0] },
{ subCategory: 'Palm OS', values: [66, 18, 1, 0, 0, 0] },
{ subCategory: 'BlackBerry OS', values: [1, 7, 20, 0.5, 0, 0] },
{ subCategory: 'Windows Mobile', values: [20, 13, 7, 2, 0, 0] },
{ subCategory: 'iOS', values: [0, 0, 15, 19, 14, 27] },
{ subCategory: 'Android', values: [0, 0, 8, 77, 82, 72] },
{ subCategory: 'Other', values: [12, 11, 6, 1.5, 4, 1] },
],
)