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幫助儘可能輕鬆地創建圖表,添加複雜的功能,而不必擔心其開發。