没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:龚雪|2025-07-10 11:05:14.883|阅读 8 次
概述:本文将为大家介绍如何用图表控件LightningChart JS实现实时并行坐标图开发,欢迎下载新版组件体验!
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
LightningChart JS是Web上性能特高的图表库,具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画,常用于贸易,工程,航空航天,医药和其他领域的应用。
实时并行坐标图是在传统并行坐标图基础上的延伸,能在图表展示过程中动态更新数据。它适用于多维数据可视化:每个维度用一条垂直坐标轴表示,数据实例则通过多轴连线展示。
实时并行坐标图可用于监控系统或进程中的实时变化,如传感器数据、事件流等。例如,当同时监测温度、压力、速度等多维数据时,它能帮助快速发现趋势、模式或异常。
要遵循这个并行坐标项目,请下载包含所有必要资源的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)
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 命令,在本地服务器可视化图表。
如果您的项目需要处理复杂实时数据并进行高效展示,LightningChart JS 是非常值得考虑的专业级方案。
更多产品信息欢迎“添加企微好友”了解!
慧都是⼀家⾏业数字化解决⽅案公司,专注于软件、⽯油与⼯业领域,以深⼊的业务理解和⾏业经验,帮助企业实现智能化转型与持续竞争优势。
慧都科技是LightningChart的中国区的合作伙伴,LightningChart作为数据可视化领域的优秀产品,通过高性能的GPU加速渲染技术,显著提升企业在实时数据可视化与海量数据处理方面的效率,尤其适用于需要快速呈现和分析数十亿数据点的场景。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:慧都网本文将为大家介绍如何用图表控件LightningChart JS实现实时并行坐标图开发,欢迎下载新版组件体验!
本文主要介绍如何使用DevExpress WPF Grid控件检查节点,欢迎下载最新版组件体验!
在本文中,我们将讨论用企业服务器替换 Publisher 的原因以及迁移计划。
本篇教程中,我们继续学习如何在 C# 中以编程方式将 PPT 转换为 SWF。
高性能的JavaScript图表库,专注于实时数据可视化。
LightningChart® .NET高性能WPF和Winforms图表,可以实时可视化多达1万亿个数据点。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号