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

什么是實時并行坐標(biāo)圖？

實時并行坐標(biāo)圖是在傳統(tǒng)并行坐標(biāo)圖基礎(chǔ)上的延伸，能在圖表展示過程中動態(tài)更新數(shù)據(jù)。它適用于多維數(shù)據(jù)可視化：每個維度用一條垂直坐標(biāo)軸表示，數(shù)據(jù)實例則通過多軸連線展示。

實時并行坐標(biāo)圖可用于監(jiān)控系統(tǒng)或進(jìn)程中的實時變化，如傳感器數(shù)據(jù)、事件流等。例如，當(dāng)同時監(jiān)測溫度、壓力、速度等多維數(shù)據(jù)時，它能幫助快速發(fā)現(xiàn)趨勢、模式或異常。

圖表原理解析

• 并行坐標(biāo)軸：每個變量（如溫度、速度、能耗）對應(yīng)一條垂直軸。
• 數(shù)據(jù)連線：每個數(shù)據(jù)點由一條折線路徑表示，不同軸上的值通過連接展示。
• 實時更新：數(shù)據(jù)隨著實時變化不斷刷新圖表，適合動態(tài)監(jiān)控。
• 交互功能：用戶可點擊或過濾圖線，以探索數(shù)據(jù)詳情。

應(yīng)用場景

• 工業(yè)、能源、通信等行業(yè)，監(jiān)控關(guān)鍵指標(biāo)變化；
• IoT、智能城市或車載數(shù)據(jù)環(huán)境下，分析多傳感器實時數(shù)據(jù)；
• 網(wǎng)絡(luò)監(jiān)控，可實時展示流量、延遲、帶寬等；
• 金融市場監(jiān)測，多資產(chǎn)實時對比輔助交易決策。

并行坐標(biāo)圖優(yōu)勢

• 多維可視化：同時展示多個變量之間的關(guān)聯(lián)；
• 模式與異常檢測：實時更新有利于快速辨別行為變化；
• 交互探索：支持動態(tài)篩選和深入分析。

項目結(jié)構(gòu)梳理

要遵循這個并行坐標(biāo)項目，請下載包含所有必要資源的ZIP文件。（）

模板設(shè)置

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

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

3. 打開一個新終端，運行npm install命令。

4. 將配置保存在tsconfig.json文件中是很重要的，這個配置將幫助您導(dǎo)入JSON文件作為數(shù)據(jù)對象。

入門準(zhǔn)備

建議更新到最新LightningChart JS 與 XYData 版本，確保支持相關(guān)功能。以下為 package.json 中的推薦依賴：

"dependencies": {
"@arction/lcjs": "^5.2.0",
"@arction/xydata": "^1.4.0",
"@lightningchart/lcjs": "^6.1.2",
"@lightningchart/xydata": "^1.4.0"
}

1. 引入庫

const lcjs = require('@lightningchart/lcjs')
const { lightningchart, Tehems, AxisScrollStrategies, LUT, regularColorSteps } = lcjs

2. 注冊（試用）許可證

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

創(chuàng)建圖表

代碼的第一部分初始化lightningChart實例，并使用各種屬性配置Parallel Coordinate Chart。

const chart = lightningChart({license: license})
.ParallelCoordinateChart({
theme: Themes.darkGold,
})
.setTitle('Real-Time Parallel Coordinate Chart')
.setAxes(['Time', 'A', 'B', 'C', 'D', 'E'])
.setSpline(true)
.forEachAxis((axis) => axis.setScrollStrategy(AxisScrollStrategies.fittingStepped))
// Time axis is only used for dynamic coloring.
chart.getAxis('Time').setVisible(false)

• 主題采用暗金風(fēng)格
• 采用平滑樣條線 (setSpline(true))
• 各軸啟用“漸進(jìn)滾動”策略
• 隱藏時間軸，只用于顏色映射

隨機(jī)數(shù)據(jù)生成器函數(shù)

const RandomDataGenerator = (start, mul) => {
let prev = start
return () => {
const y = prev + (Math.random() * 2 - 1) * mul
prev = y
return y
}
}

定義 RandomDataGenerator 函數(shù)用于生成隨機(jī)數(shù)據(jù)點。它接收兩個參數(shù)：start（初始值）和 mul（決定波動范圍的乘數(shù)）。

該函數(shù)維護(hù)一個 prev 變量跟蹤上次生成的值，下一個值基于限定范圍內(nèi)的隨機(jī)波動計算得出。此函數(shù)用于為"A"、"B"、"C"、"D"、"E"坐標(biāo)軸生成隨機(jī)數(shù)據(jù)。

實例化隨機(jī)數(shù)據(jù)生成器

為每個坐標(biāo)軸（"A"、"B"、"C"、"D"、"E"）創(chuàng)建五個 RandomDataGenerator 實例以模擬實時變化數(shù)據(jù)。每個軸具有不同的初始值和乘數(shù)，確保生成唯一的隨機(jī)數(shù)據(jù)。這些實例命名為 Y0、Y1、Y2、Y3 和 Y4。

const Y0 = RandomDataGenerator(0, 2)
const Y1 = RandomDataGenerator(1000, 200)
const Y2 = RandomDataGenerator(100, 20)
const Y3 = RandomDataGenerator(10, 2)
const Y4 = RandomDataGenerator(80, 10)

帶間隔的數(shù)據(jù)生成循環(huán)

let tLastCleanup = -10000
setInterval(() => {
const tNow = performance.now()
const y0 = Y0()
const y1 = Y1()
const y2 = Y2()
const y3 = Y3()
const y4 = Y4()
chart.addSeries({ automaticColorIndex: 0 }).setData({
Time: tNow,
A: y0,
B: y1,
C: y2,
D: y3,
E: y4,
})

通過 setInterval() 設(shè)置間隔函數(shù)每 50 毫秒運行一次。函數(shù)內(nèi)部通過調(diào)用對應(yīng)的 RandomDataGenerator 實例為每個軸生成新數(shù)據(jù)點。

生成的數(shù)據(jù)與當(dāng)前時間(tNow)通過 chart.addSeries() 添加到圖表中。這模擬了實時數(shù)據(jù)流入圖表的過程，各軸數(shù)據(jù)持續(xù)更新。

數(shù)據(jù)清理與序列移除

// Manual data cleaning, batched for better performance.
if (tNow - tLastCleanup >= 5_000) {
// Remove series that are older than 1 minute
const series = chart.getSeries().slice()
series.forEach((s) => {
const data = s.getData()
const timestamp = data && data.Time
if (timestamp && tNow - timestamp >= 60_000) s.dispose()
})

代碼包含每5秒運行的清理機(jī)制。清理過程檢查超過一分鐘（60,000毫秒）的序列并將其從圖表中移除以保持性能。tLastCleanup 變量記錄上次清理時間，通過比較當(dāng)前時間與序列數(shù)據(jù)點的時間戳決定是否應(yīng)銷毀。

基于數(shù)據(jù)時效的動態(tài)著色

// Manual data cleaning, batched for better performance.
if (tNow - tLastCleanup >= 5_000) {
// Remove series that are older than 1 minute
const series = chart.getSeries().slice()
series.forEach((s) => {
const data = s.getData()
const timestamp = data && data.Time
if (timestamp && tNow - timestamp >= 60_000) s.dispose()
})
// Color series dynamically based on how new the data points are
chart.setLUT({
axis: chart.getAxis('Time'),
lut: new LUT({
interpolate: true,
steps: regularColorSteps(tNow - 60_000, tNow, chart.getTheme().examples.intensityColorPalette).map((step, i, steps) => ({
...step,
color: step.color.setA(255 * (i / (steps.length - 1))),
})),
}),
})
tLastCleanup = tNow
}
}, 50)

清理舊序列后，代碼根據(jù)數(shù)據(jù)點時效設(shè)置動態(tài)著色。使用查找表(LUT)進(jìn)行顏色插值，直觀呈現(xiàn)數(shù)據(jù)點的新舊程度。顏色透明度基于數(shù)據(jù)生成時間動態(tài)調(diào)整（255 * (i/(steps.length-1))），形成隨時間變化的視覺漸變效果。該LUT應(yīng)用于"Time"坐標(biāo)軸，確保圖表直觀反映數(shù)據(jù)時效

圖表初始化

在終端運行 npm start 命令，在本地服務(wù)器可視化圖表。

總結(jié)概覽

• 高性能數(shù)據(jù)處理：定時清理過期數(shù)據(jù)，保障性能穩(wěn)定；
• 高頻刷新流暢體驗：50?ms 刷新頻率配合優(yōu)化邏輯，實現(xiàn)極佳流暢性；
• LightningChart JS 優(yōu)勢：
  • 強(qiáng)大的渲染與性能處理能力；
  • 豐富交互支持，適合復(fù)雜場景下探索分析；
  • 靈活主題設(shè)置與色彩映射機(jī)制支持多樣可視化。

如果您的項目需要處理復(fù)雜實時數(shù)據(jù)并進(jìn)行高效展示，LightningChart JS 是非常值得考慮的專業(yè)級方案。

更多產(chǎn)品信息歡迎“”了解！

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗，幫助企業(yè)實現(xiàn)智能化轉(zhuǎn)型與持續(xù)競爭優(yōu)勢。

慧都科技是LightningChart的中國區(qū)的合作伙伴，LightningChart作為數(shù)據(jù)可視化領(lǐng)域的優(yōu)秀產(chǎn)品，通過高性能的GPU加速渲染技術(shù)，顯著提升企業(yè)在實時數(shù)據(jù)可視化與海量數(shù)據(jù)處理方面的效率，尤其適用于需要快速呈現(xiàn)和分析數(shù)十億數(shù)據(jù)點的場景。