LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航天，醫藥和其他領域的應用。
LightningChart JS提供了堆疊條形圖，用於輕鬆創建具有可定製功能的數據應用程序。
JavaScript堆疊條形圖
當看到來自不同類別或彼此值的大量數據時，堆疊條形圖非常有用。我們可以看到一個類別是如何被分成幾個部分的，從最大到最小的部分相對於總量，堆疊條形圖有兩種類型：
簡單的堆疊條形圖將每個值連續地放在一個段中，條形圖的總價值就是該段的總價值，它是比較片段之間總數量的理想方法。
100%堆疊條形圖顯示了每個細分市場中每個類別的總百分比，並用每個值佔該細分市場總數量的百分比表示，這使得我們更容易看到各組數量的百分比差異。
根據數據分析的目標，我們可以根據可視化需求評估每個數據的有用性。在這種情況下，JavaScript堆疊條形圖對於任何類型的用戶來說都很容易理解。JavaScript堆疊條形圖的另一個特性是以多色條形顯示數據，其中每個條形代表一個主要類別，每種顏色代表一個次要維度，這使我們能夠方便地查詢每個段類別的次要維度及其關係之間的關係。
項目概述
在本文中，我們將解釋100%堆疊條形圖，並使用LightningChart JS和Node JS創建堆疊條形圖。請記住，您可以下載這個項目的模板並試用它，直接戳這裏>>
模板設置
1. 下載提供的模板來學習本教程。
2. 下載模板後，您會看到如下的文件樹：
3. 打開一個新終端，運行npm install命令。
CHART.ts
今天最新的版本是LightningChart JS 5.1.0和XYData 1.4.0，建議您查看最新版本就並進行更新，因爲一些LightningChart JS工具在以前的版本中不存在。
在項目的package.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堆疊條形圖對象。
let license = undefined
try {
license = 'xxxxxxxxxxxxx'
} catch (e) {}
3. 屬性
LightningChart JS爲您提供了完全自定義圖表對象屬性的可能性，將使用以下屬性來創建這個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
})
– Theme：定義JavaScript堆疊條形圖的外觀和感覺，注意您必須事先指定圖表組件的顏色主題。
– setCursorResultTableFormatter：當光標指向本系列時，配置光標懸停結果表的格式，結果表將顯示爲一個帶有數據值的彈出框。
每一行被生成爲一行(.addrow)，我們可以用需要的文本對其進行格式化。子類別和值屬性對應於分配給圖表的數據。子類別包含圖表的類別或分組的名稱，Value包含按類別堆疊的每個條的值。
.setCursorResultTableFormatter((builder, category, value, bar) => {
builder.addRow('OS:', bar.subCategory).addRow('Share:', String(value), '%')
4. 類別和堆疊欄
要將類別和堆疊條形圖添加到JavaScript堆疊條形圖中，我們將使用setdatastack函數，這個函數允許添加水平軸分組和屬於每個分組的類別。值數組中的值將按照其連續順序對應於分組，例如值51將對應於組2004，每個類別將堆疊在另一個類別之上，但值將根據其位置和匹配組進行排序。
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
最後我們將添加圖例框，通過顏色指示類別，並在單擊它們時隱藏想要的類別。
const legend = barChart
.addLegendBox(LegendBoxBuilders.VerticalLegendBox)
.setAutoDispose({
type: 'max-width',
maxWidth: 0.3,
})
legend.add(barChart)
圖例框可以橫向和縱向添加，此圖例框可以在滿足條件時自動刪除，例如超過相對於圖表大小的最大寬度，當圖表分辨率太小或當圖表太大時釋放內存時，這很有用。
6. 初始化圖表
最後，在終端中運行npm start命令來可視化本地服務器上的JavaScript堆疊條形圖。
結論
JavaScript堆疊條形圖是一種幫助我們更有效地可視化數據的資源，因爲它能夠輕鬆地表示複雜的數據集。即使這種類型的圖表可能並不總是在所有儀表板報告中使用或看到，它也是簡化按組或類別顯示大量數據的一個很好的資源。
在這種情況下，LightningChart JS爲我們提供了一個簡單實用的圖表組件：JavaScript堆疊條形圖，同樣我們不必過於擔心用於開發圖表應用程序的代碼。
只需向我們的對象提供一個數據數組，就可以創建帶有所有動畫和可用控件的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] },
],
)