LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航天，醫藥和其他領域的應用。
在創建需要從大型數據集中可視化3個或更多變量的數據應用程序時，JavaScript 2D氣泡圖非常有用。
JavaScript 2D氣泡圖
在本文中，我們將使用Node JS和LightningChartJS創建一個JavaScript 2D氣泡圖。
當我們正在尋找一種有吸引力的方式來表示數據時，可以選擇使用氣泡圖，它允許在笛卡爾平面中顯示結果。氣泡圖與散點圖非常相似，因爲它們使用笛卡爾座標將數據顯示爲點，氣泡圖是一種很少使用的工具，但很容易通過其外觀、氣泡形狀和不同顏色的氣泡來識別，這些氣泡有助於理解數據的值和相關性。
JavaScript 2D氣泡圖由二維平面(X-Y)、氣泡大小組成，我們還可以通過爲數據點(氣泡)賦予顏色來表示第四個值。在處理複雜比例的多個數據時必須考慮，因爲圖形可能具有太多氣泡的缺點，使其難以理解。
另一個需要考慮的問題是，可能很難在圖表中找到零值或負值。對於這些情況，建議事先對數據進行分組，以減少顯示的氣泡數量，併爲每個氣泡使用標籤。考慮一下，JavaScript 2D氣泡圖是用來可視化具有三個變量(以及附加的顏色變量)的數據的。
項目概述
本項目遵循使用氣泡圖開發數據應用程序的系列，LightningChart .NET和JS提供了各自版本的氣泡圖。根據您的項目需求，您可以選擇使用LightningChart JS或.NET開發數據應用程序。
但是今天，我們將專注於使用LightningChart JS創建一個JavaScript 2D氣泡圖：
模板設置
1. 下載提供的模板來學習本教程。
2. 下載模板後，您會看到如下的文件樹：
3. 打開一個新終端，運行npm install命令。
CHART.ts
今天最新的版本是LightningChart JS 5.1.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. 屬性
const chart = lightningChart({license: license})
.ChartXY({
theme: Themes.cyberSpace,
})
.setTitle('Bubble Chart with 3 KPIs and data grouping')
創建數據集
const groupsData = new Array(3).fill(0).map((_) => {
const dataCount = 1_000
const data = new Array(dataCount)
for (let i = 0; i < dataCount; i += 1) {
const x = Math.random()
const y = Math.random()
const kpi3 = Math.random()
// Map 3rd performance indicator value to a point size as pixels.
const size = 1 + 19 * kpi3 ** 3
// kpi3 value is also stored in data point for use in cursor formatting
data[i] = { x, y, size, kpi3 }
}
return data
})
我們將創建一個包含三個數據對象的數組，對於每個對象，將爲X、Y、KPI3軸創建1000個點。KPI3將是一個性能值，每個氣泡的大小將由性能決定，性能越高，氣泡尺寸越大。
每個生成點的4個值將被添加到它們各自的對象中。
添加PointSeries
const groupsSeries = groupsData.map((data, i) => {
const pointSeries = chart
.addPointSeries({ pointShape: PointShape.Circle })
.setName(`Group ${i + 1}`)
.setPointFillStyle((fillStyle) => fillStyle.setA(100))
.setIndividualPointSizeEnabled(true)
.add(data)
.setCursorResultTableFormatter((builder, _, x, y, dataPoint) =>
builder
.addRow(pointSeries.getName())
.addRow(pointSeries.axisX.getTitle(), '', pointSeries.axisX.formatValue(dataPoint.x))
.addRow(pointSeries.axisY.getTitle(), '', pointSeries.axisY.formatValue(dataPoint.y))
.addRow('KPI 3', '', dataPoint.kpi3.toFixed(3)),
)
return pointSeries
})
在XY圖表類型中顯示數據需要一系列的點，現在我們將爲JavaScript 2D氣泡圖(groupsData)的數據集中的每個點創建一個系列。
對於每個點，我們將使用addPointSeries函數。這個系列類型顯示了一個點列表(一對X和Y座標)，每個座標上都有可配置的標記。Point Series針對海量數據進行了優化——以下是一些參考規範：
- 數千萬範圍內的靜態數據集在幾秒鐘內呈現。
- 使用流數據，每秒甚至可以傳輸數百萬個數據點，同時保留交互式文檔。
對於每個系列，我們可以添加一個名稱(setName)，一個填充樣式(setPointFillStyle)，它可以具有透明度，顏色，或者兩者兼有。
由於每個氣泡的大小不同，我們需要啓用setIndividualPointSizeEnabled函數，該函數將尊重我們在前面的方法中生成的大小值。
SetCursorResultTableFormatter允許我們通過將光標定位在氣泡上來創建和顯示數據表。
每一行都用addRow添加，並且可以添加數據點內的任何類型的值或在代碼中配置的值。
結論
在突出顯示我們想要顯示的信息類型時，引入圖形或數據可視化元素非常重要。當您有3個或更多變量時，JavaScript 2D氣泡圖是一個完美的工具。當我們需要分析人口或財務價值時，氣泡的使用是有用的。但正如我們在引言中提到的，這個圖表可以考慮到發展。
首先要考慮的是，當我們有大量的泡沫時，要找到一個特定的值或可視化每個泡沫的值太複雜了。
LightningChartJS幫助我們解決這個問題，利用數據表並添加一種格式來顯示每個數據點的值。
這個開發看起來並不是很複雜或廣泛，而這正是LightningChart JS 2D氣泡圖的目標。LCJS幫助儘可能輕鬆地創建圖表，添加複雜的功能，而不必擔心其開發。