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

 在創(chuàng)建需要從大型數(shù)據(jù)集中可視化3個或更多變量的數(shù)據(jù)應(yīng)用程序時，JavaScript 2D氣泡圖非常有用。

JavaScript 2D氣泡圖

在本文中，我們將使用Node JS和LightningChartJS創(chuàng)建一個JavaScript 2D氣泡圖。

當(dāng)我們正在尋找一種有吸引力的方式來表示數(shù)據(jù)時，可以選擇使用氣泡圖，它允許在笛卡爾平面中顯示結(jié)果。氣泡圖與散點圖非常相似，因為它們使用笛卡爾坐標(biāo)將數(shù)據(jù)顯示為點，氣泡圖是一種很少使用的工具，但很容易通過其外觀、氣泡形狀和不同顏色的氣泡來識別，這些氣泡有助于理解數(shù)據(jù)的值和相關(guān)性。

JavaScript 2D氣泡圖由二維平面(X-Y)、氣泡大小組成，我們還可以通過為數(shù)據(jù)點(氣泡)賦予顏色來表示第四個值。在處理復(fù)雜比例的多個數(shù)據(jù)時必須考慮，因為圖形可能具有太多氣泡的缺點，使其難以理解。

另一個需要考慮的問題是，可能很難在圖表中找到零值或負(fù)值。對于這些情況，建議事先對數(shù)據(jù)進行分組，以減少顯示的氣泡數(shù)量，并為每個氣泡使用標(biāo)簽。考慮一下，JavaScript 2D氣泡圖是用來可視化具有三個變量(以及附加的顏色變量)的數(shù)據(jù)的。

項目概述

本項目遵循使用氣泡圖開發(fā)數(shù)據(jù)應(yīng)用程序的系列，LightningChart .NET和JS提供了各自版本的氣泡圖。根據(jù)您的項目需求，您可以選擇使用LightningChart JS或.NET開發(fā)數(shù)據(jù)應(yīng)用程序。

但是今天，我們將專注于使用LightningChart JS創(chuàng)建一個JavaScript 2D氣泡圖：

模板設(shè)置

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

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. 導(dǎo)入庫

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

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

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

安裝LightningChart JS庫之后，我們將把它們導(dǎo)入到chart.ts文件中。注意，您將需要試用許可證，這是免費的。然后將其添加到一個變量中，該變量將用于創(chuàng)建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')

• ：定義JavaScript堆疊條形圖的外觀和感覺，注意您必須事先指定圖表組件的顏色主題。
• ：將名稱設(shè)置在圖表頂部。

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

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
})

我們將創(chuàng)建一個包含三個數(shù)據(jù)對象的數(shù)組，對于每個對象，將為X、Y、KPI3軸創(chuàng)建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圖表類型中顯示數(shù)據(jù)需要一系列的點，現(xiàn)在我們將為JavaScript 2D氣泡圖(groupsData)的數(shù)據(jù)集中的每個點創(chuàng)建一個系列。

對于每個點，我們將使用addPointSeries函數(shù)。這個系列類型顯示了一個點列表(一對X和Y坐標(biāo))，每個坐標(biāo)上都有可配置的標(biāo)記。Point Series針對海量數(shù)據(jù)進行了優(yōu)化——以下是一些參考規(guī)范：

• 數(shù)千萬范圍內(nèi)的靜態(tài)數(shù)據(jù)集在幾秒鐘內(nèi)呈現(xiàn)。
• 使用流數(shù)據(jù)，每秒甚至可以傳輸數(shù)百萬個數(shù)據(jù)點，同時保留交互式文檔。

對于每個系列，我們可以添加一個名稱(setName)，一個填充樣式(setPointFillStyle)，它可以具有透明度，顏色，或者兩者兼有。

由于每個氣泡的大小不同，我們需要啟用setIndividualPointSizeEnabled函數(shù)，該函數(shù)將尊重我們在前面的方法中生成的大小值。

SetCursorResultTableFormatter允許我們通過將光標(biāo)定位在氣泡上來創(chuàng)建和顯示數(shù)據(jù)表。

每一行都用addRow添加，并且可以添加數(shù)據(jù)點內(nèi)的任何類型的值或在代碼中配置的值。

結(jié)論

在突出顯示我們想要顯示的信息類型時，引入圖形或數(shù)據(jù)可視化元素非常重要。當(dāng)您有3個或更多變量時，JavaScript 2D氣泡圖是一個完美的工具。當(dāng)我們需要分析人口或財務(wù)價值時，氣泡的使用是有用的。但正如我們在引言中提到的，這個圖表可以考慮到發(fā)展。

首先要考慮的是，當(dāng)我們有大量的泡沫時，要找到一個特定的值或可視化每個泡沫的值太復(fù)雜了。

LightningChartJS幫助我們解決這個問題，利用數(shù)據(jù)表并添加一種格式來顯示每個數(shù)據(jù)點的值。

這個開發(fā)看起來并不是很復(fù)雜或廣泛，而這正是LightningChart JS 2D氣泡圖的目標(biāo)。LCJS幫助盡可能輕松地創(chuàng)建圖表，添加復(fù)雜的功能，而不必?fù)?dān)心其開發(fā)。