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

在本篇教程中，我們將帶你了解如何使用 LightningChart JS 構建一個支持 多圖表布局 (Multi-Chart Canvas) 的實時數(shù)據(jù)儀表盤。

引言

相比普通的單圖表頁面，這種儀表盤能同時展示多個可交互的圖表，您可以隨意移動、調整大小、甚至重疊顯示，實現(xiàn)真正的“多視圖”數(shù)據(jù)可視化體驗。

LightningChart JS 是一款 高性能 JavaScript 數(shù)據(jù)可視化庫，非常適合需要處理 實時數(shù)據(jù)流和大數(shù)據(jù)量繪制 的應用場景，如：

• 工業(yè)設備運行監(jiān)控
• 金融市場行情分析
• 科研實驗數(shù)據(jù)展示
• IoT 數(shù)據(jù)儀表盤

在本示例中，我們將在瀏覽器中同時顯示 20 個動態(tài)圖表和一個 Canvas 繪圖層。用戶可以：

• 使用鼠標拖動圖表，自由調整布局；
• 滾動或縮放查看不同數(shù)據(jù)范圍；
• 在圖表中實時顯示新數(shù)據(jù)點。

最終效果是一個輕量但強大的實時可視化儀表盤，既能滿足高性能需求，也能為交互式前端項目提供靈活布局的參考方案。

項目概覽

為了能跟隨這個 JavaScript 多圖表 canvas 項目，請下載附帶所需資源的 ZIP 文件。

模板設置

1. 下載所提供的模版以便跟隨本教程。

2. 下載后，你會看到如下的文件樹結構：

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

 4. 保持 tsconfig.json 文件中的配置非常重要，該配置將幫助您將 JSON 文件作為數(shù)據(jù)對象導入。

開始使用

我們建議您使用并更新到最新版的LightningChart JS 和 XYData，原因是：某些 LightningChart JS 工具在早期版本中并不存在。

在項目的 package.json 文件中可以找到 LightningChart JS 的依賴項：

"dependencies": {
"@lightningchart/lcjs": "^7.0.2",
}

1. 導入類

import {AxisScrollStrategies, emptyFill, lightningChart, isImageFill, SolidFill, ColorRGBA, Themes} from "@lightningchart/lcjs";

2. 添加許可證密鑰（免費）

安裝完 LightningChart JS 庫后，我們將在 `chart.ts` 文件中導入它們，注意您需要一個 **試用許可證 (trial license)**，這是免費的。

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

創(chuàng)建圖表

該代碼動態(tài)地在網(wǎng)頁中創(chuàng)建可調整大小和可拖動的窗口，每個窗口都可以顯示LightningChart或簡單的Canvas繪圖，它還更新閃電圖與實時數(shù)據(jù)。下面是對代碼的逐步解釋。

Step 1：設置容器

這段代碼嘗試查找一個 ID 為 `"chart"` 的元素，如果不存在，則默認使用 `document.body`：

const exampleContainer = document.getElementById('chart') || document.body
if (exampleContainer === document.body) {
exampleContainer.style.width = '100vw'
exampleContainer.style.height = 'max(100vh, 100%)'
exampleContainer.style.margin = '0px'
}
exampleContainer.style.overflowX = 'hidden'

如果使用的是 document.body，則應用全屏樣式：

• 寬度：100 vw，即視口寬度的 100%
• 高度：max(100vh, 100%)，即視口高度或父元素高度中的最大值
• 去除 margin，并隱藏橫向滾動條

Step 2：初始化LightningChart

這段代碼初始化LightningChart的一個實例，LightningChart是一個高性能的JavaScript圖表庫，并且需要一個有效的許可參數(shù)來啟用使用。

const lc = lightningChart({license:license})

Step 3：創(chuàng)建窗口（圖表或畫布）

這段代碼創(chuàng)建了一個div元素（一個窗口），它將它添加到towindowsContainer中，該容器要么是document.body，要么是chart元素。

const windowsContainer = exampleContainer
const windows = []
const createWindow = (type) => {
const container = document.createElement('div')
windowsContainer.append(container)
container.style.position = 'absolute'
container.style.boxSizing = 'content-box'
container.style.width = `${windowsContainer.getBoundingClientRect().width / 4}px`
container.style.left = `${(windows.length % 4) * (windowsContainer.getBoundingClientRect().width / 4)}px`
container.style.height = '200px'
container.style.top = `${Math.floor(windows.length / 4) * 200}px`

該代碼將 container 樣式設為 absolute （允許自由移動每個圖表），它將容器分為 4 列（每個窗口寬度為容器寬度的 ?），高度設為 200px。窗口位置按如下規(guī)則排列：

• 水平位置 = (windows.length % 4) * (width / 4)
• 垂直位置 = Math.floor(windows.length / 4) * 200

Step 4：添加 LightningChart 或 Canvas 繪圖

根據(jù) type 參數(shù)選擇：

switch (type) {
case 'lightningchart': {
const chart = lc
.ChartXY({
container,
theme: Themes.darkGold,
})
.setCursorMode('show-nearest')
.setTitleEffect(false)
.setSeriesBackgroundEffect(false)

• 若 type === 'lightningchart'，則創(chuàng)建一個 ChartXY 圖表實例，使用 Dark Gold 主題，并通過 setTitleEffect(false) 和 setSeriesBackgroundEffect(false) 禁用對應特效。
• 若 type === 'other'，則創(chuàng)建一個普通 HTML canvas，在其中繪制藍色矩形、紅色圓形及綠色線條。然后將窗口對象存儲于 windows 數(shù)組中。

Step 5：使窗口可拖拽

case 'other':
default: {
const canvas = document.createElement('canvas')
container.append(canvas)
canvas.style.width = '100%'
canvas.style.height = '100%'
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 100)
ctx.beginPath()
ctx.arc(250, 100, 50, 0, Math.PI * 2)
ctx.fillStyle = 'red'
ctx.fill()
ctx.closePath()
ctx.beginPath()
ctx.moveTo(25, 100)
ctx.lineTo(225, 100)
ctx.strokeStyle = 'green'
ctx.lineWidth = 5
ctx.stroke()
ctx.closePath()
windows.push({ type: 'other', container })
break
}

• 如果type === 'other'創(chuàng)建一個HTML <canvas>，畫一個藍色矩形，紅色圓圈和綠色線條，它還將窗口對象存儲在窗口中。

Step 6：生成窗口并更新實時數(shù)據(jù)

container.addEventListener('pointerdown', (eventDown) => {
if (eventDown.defaultPrevented) return
container.style.pointerEvents = 'none'
windows.forEach((window) => window.type === 'lightningchart' && window.chart.setCursorMode(undefined))
// Lift window to top draw order by placing it as last DOM child
windowsContainer.append(container)
let prevEvent = eventDown
const handleMove = (eventMove) => {
const delta = {
x: eventMove.clientX - prevEvent.clientX,
y: eventMove.clientY - prevEvent.clientY,
}
container.style.left = `${Number.parseFloat(container.style.left.replace('px', '')) + delta.x}px`
container.style.top = `${Number.parseFloat(container.style.top.replace('px', '')) + delta.y}px`
prevEvent = eventMove
}
const handleUp = (eventUp) => {
container.style.pointerEvents = 'unset'
windows.forEach((window) => window.type === 'lightningchart' && window.chart.setCursorMode('show-nearest'))
window.removeEventListener('pointermove', handleMove)
window.removeEventListener('pointerup', handleUp)
}
window.addEventListener('pointermove', handleMove)
window.addEventListener('pointerup', handleUp)
})

• 這段代碼為用戶單擊窗口時的pointerdown添加了一個事件監(jiān)聽器，通過將窗口設置為最后一個子DOM將窗口移動到頂部，通過pointermove跟蹤鼠標移動以更新窗口的位置 (left, top)，并在指針被釋放后停止跟蹤（pointerup）。

Step 7：生成窗口和實時數(shù)據(jù)更新

這段代碼創(chuàng)建了20個LightningChart窗口和一個Canvas窗口。

for (let i = 0; i < 20; i += 1) {
createWindow('lightningchart')
}
createWindow('other')

Step 8：用實時數(shù)據(jù)更新LightningChart JS

這段代碼生成新的數(shù)據(jù)點，其中x表示時間，y是一個隨機值，并每16毫秒更新每個LightningChart窗口，以保持大約每秒60幀的刷新率。

setInterval(() => {
const p = { x: performance.now(), y: Math.random() }
windows.forEach((window) => {
if (window.type !== 'lightningchart') return
if (window.series) {
window.series.appendSample(p)
} else if (window.pointSeriesList) {
const series = window.pointSeriesList[Math.round(Math.random() * (window.pointSeriesList.length - 1))]
series.appendSample(p)
}
})
}, 1000 / 60)

初始化圖表

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

總結

這個項目是一個很好的示例，展示了 LightningChart JS 如何用于創(chuàng)建快速、交互式、實時數(shù)據(jù)可視化。該代碼能同時處理多個圖表，同時確保即便在持續(xù)數(shù)據(jù)更新的情況下也具備流暢性能。

為什么選擇 LightningChart JS？

• 極速響應 — 專為實時數(shù)據(jù)設計，圖表保持響應迅速且無延遲。
• 可定制 & 互動性強 — 支持不同主題、光標模式、動態(tài)調整大小。
• 處理大數(shù)據(jù)集能力強 — 容易處理成千上萬的數(shù)據(jù)點而不卡頓。

憑借其高性能渲染和易于擴展的特性，LightningChart JS 非常適用于金融分析、科學研究和工業(yè)監(jiān)控等應用場景。這個設置看似簡單，但也提供了滿足要求嚴苛、實時數(shù)據(jù)應用所需的速度和靈活性。

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

關于慧都科技

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

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