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

什么是實時并行坐標圖？

實時并行坐標圖是在傳統并行坐標圖基礎上的延伸，能在圖表展示過程中動態更新數據。它適用于多維數據可視化：每個維度用一條垂直坐標軸表示，數據實例則通過多軸連線展示。

實時并行坐標圖可用于監控系統或進程中的實時變化，如傳感器數據、事件流等。例如，當同時監測溫度、壓力、速度等多維數據時，它能幫助快速發現趨勢、模式或異常。

圖表原理解析

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

應用場景

• 工業、能源、通信等行業，監控關鍵指標變化；
• IoT、智能城市或車載數據環境下，分析多傳感器實時數據；
• 網絡監控，可實時展示流量、延遲、帶寬等；
• 金融市場監測，多資產實時對比輔助交易決策。

并行坐標圖優勢

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

項目結構梳理

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

模板設置

1. 下載提供的模板來學習本教程。

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

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

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

入門準備

建議更新到最新LightningChart JS 與 XYData 版本，確保支持相關功能。以下為 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) {}

創建圖表

 代碼的第一部分初始化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)

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

隨機數據生成器函數

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

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

該函數維護一個 prev 變量跟蹤上次生成的值，下一個值基于限定范圍內的隨機波動計算得出。此函數用于為"A"、"B"、"C"、"D"、"E"坐標軸生成隨機數據。

實例化隨機數據生成器

為每個坐標軸（"A"、"B"、"C"、"D"、"E"）創建五個 RandomDataGenerator 實例以模擬實時變化數據。每個軸具有不同的初始值和乘數，確保生成唯一的隨機數據。這些實例命名為 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)

帶間隔的數據生成循環

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() 設置間隔函數每 50 毫秒運行一次。函數內部通過調用對應的 RandomDataGenerator 實例為每個軸生成新數據點。

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

數據清理與序列移除

// 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秒運行的清理機制。清理過程檢查超過一分鐘（60,000毫秒）的序列并將其從圖表中移除以保持性能。tLastCleanup 變量記錄上次清理時間，通過比較當前時間與序列數據點的時間戳決定是否應銷毀。

基于數據時效的動態著色

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

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

圖表初始化

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

總結概覽

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

如果您的項目需要處理復雜實時數據并進行高效展示，LightningChart JS 是非常值得考慮的專業級方案。

更多產品信息歡迎“”了解！

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是LightningChart的中國區的合作伙伴，LightningChart作為數據可視化領域的優秀產品，通過高性能的GPU加速渲染技術，顯著提升企業在實時數據可視化與海量數據處理方面的效率，尤其適用于需要快速呈現和分析數十億數據點的場景。