永利最大(官方)网站

LightningChart JS是Web上性能特高的图表库，具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用，从而实现高刷新率和流畅的动画，常用于贸易，工程，航空航天，医药和其他领域的应用。

在本篇教程中，我们将带你了解如何使用 LightningChart JS 构建一个支持 多图表布局 (Multi-Chart Canvas) 的实时数据仪表盘。

引言

相比普通的单图表页面，这种仪表盘能同时展示多个可交互的图表，您可以随意移动、调整大小、甚至重叠显示，实现真正的“多视图”数据可视化体验。

LightningChart JS 是一款 高性能 JavaScript 数据可视化库，非常适合需要处理 实时数据流和大数据量绘制 的应用场景，如：

• 工业设备运行监控
• 金融市场行情分析
• 科研实验数据展示
• IoT 数据仪表盘

在本示例中，我们将在浏览器中同时显示 20 个动态图表和一个 Canvas 绘图层。用户可以：

• 使用鼠标拖动图表，自由调整布局；
• 滚动或缩放查看不同数据范围；
• 在图表中实时显示新数据点。

最终效果是一个轻量但强大的实时可视化仪表盘，既能满足高性能需求，也能为交互式前端项目提供灵活布局的参考方案。

项目概览

为了能跟随这个 JavaScript 多图表 canvas 项目，请下载附带所需资源的 ZIP 文件。

模板设置

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

2. 下载后，你会看到如下的文件树结构：

3. 打开一个新的终端 (terminal)，运行 npm install 命令。

4. 保持 tsconfig.json 文件中的配置非常重要，该配置将帮助您将 JSON 文件作为数据对象导入。

开始使用

我们建议您使用并更新到最新版的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) {}

创建图表

该代码动态地在网页中创建可调整大小和可拖动的窗口，每个窗口都可以显示LightningChart或简单的Canvas绘图，它还更新闪电图与实时数据。下面是对代码的逐步解释。

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图表库，并且需要一个有效的许可参数来启用使用。

const lc = lightningChart({license:license})

Step 3：创建窗口（图表或画布）

这段代码创建了一个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。窗口位置按如下规则排列：

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

Step 4：添加 LightningChart 或 Canvas 绘图

根据 type 参数选择：

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

• 若 type === 'lightningchart'，则创建一个 ChartXY 图表实例，使用 Dark Gold 主题，并通过 setTitleEffect(false) 和 setSeriesBackgroundEffect(false) 禁用对应特效。
• 若 type === 'other'，则创建一个普通 HTML canvas，在其中绘制蓝色矩形、红色圆形及绿色线条。然后将窗口对象存储于 windows 数组中。

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'创建一个HTML <canvas>，画一个蓝色矩形，红色圆圈和绿色线条，它还将窗口对象存储在窗口中。

Step 6：生成窗口并更新实时数据

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添加了一个事件监听器，通过将窗口设置为最后一个子DOM将窗口移动到顶部，通过pointermove跟踪鼠标移动以更新窗口的位置 (left, top)，并在指针被释放后停止跟踪（pointerup）。

Step 7：生成窗口和实时数据更新

这段代码创建了20个LightningChart窗口和一个Canvas窗口。

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

Step 8：用实时数据更新LightningChart JS

这段代码生成新的数据点，其中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 如何用于创建快速、交互式、实时数据可视化。该代码能同时处理多个图表，同时确保即便在持续数据更新的情况下也具备流畅性能。

为什么选择 LightningChart JS？

• 极速响应 — 专为实时数据设计，图表保持响应迅速且无延迟。
• 可定制 & 互动性强 — 支持不同主题、光标模式、动态调整大小。
• 处理大数据集能力强 — 容易处理成千上万的数据点而不卡顿。

凭借其高性能渲染和易于扩展的特性，LightningChart JS 非常适用于金融分析、科学研究和工业监控等应用场景。这个设置看似简单，但也提供了满足要求严苛、实时数据应用所需的速度和灵活性。

更多产品更新信息欢迎“”了解！

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

慧都科技是LightningChart的中国区的合作伙伴，LightningChart作为数据可视化领域的优秀产品，通过高性能的GPU加速渲染技术，显著提升企业在实时数据可视化与海量数据处理方面的效率，尤其适用于需要快速呈现和分析数十亿数据点的场景。