加载中......
输入验证码,即可复制
微信扫码下载好向圈APP, 登陆后即可进入消息页面查看验证码
只需要3秒时间
在本文中,我们将创建一个带有 2D 和 3D 频谱图的 JS 仪表板。创建这个项目的目的是解释如何创建一个振动分析应用程序,该应用程序将使用LightningCharts JS通过其lcjs 库为我们提供的 2D 和 3D 频谱图检查声波。
LightningChart JS官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

振动分析对于检测工业设备中的错误和/或故障非常重要(仅举一个例子)。
可以通过聆听它们产生的声音强度来检测安全阀、空气冷却器和压缩元件的故障。
使用我们接下来要构建的图表,我们将看到一个与类似案例对应的音频文件。
主要从以下几部分来介绍:

  • 启动项目
  • 对仪表板、调色板和频道列表进行编码
  • 创建 2D 和 3D 频谱图
  • 配置无限传输
  • 振动分析频谱图前言
  • 下载项目 (.zip)
  • 经常问的问题
启动项目

使用 Visual Studio 代码:

  • 创建文件 [dashboard.ts]
  • 添加文件 [audio2ch.json]

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-1.jpg


  • 打开一个新终端并执行命令 [npm install]

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-2.jpg

完成上述操作后,将安装我们编译项目所需的库。
在这些库中,将有一个 @arction/lcjs 库,其中包含有助于我们构建图表的类。
对仪表板、调色板和频道列表进行编码。

将从我们的 [dashboard.ts] 文件开始。

导入 JSON 文件,该文件将包含两字节数组。一个是通道 1,另一个是通道 2。现在,在常量中添加必要的类,以便能够更轻松地使用它们。

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-3.jpg


创建以下常量:

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-4.jpg


  • [historyMS] = 将影响分析声波的速度(毫秒)(值越低,速度越高)。
  • [sampleRateHZ] = 每秒采样数。
  • [sampleIntervalMS] = 影响音频波形在图表上显示的每秒帧数。
创建将显示用于振动分析的频谱图的仪表板:

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-5.jpg

我们的仪表板将有两列和两行。现在分配您喜欢的主题和行的高度。
为音频波形创建调色板:

JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-6.jpg

LUTSteps集合指定颜色及其对应的值,以描述渐变中过渡点的位置和颜色。每个都表示为一个偶数对象{值:数字,颜色:颜色}。

创建频道列表
在我们的JSON文件中,我们有两个数组字节,每个字节对应一个频道,因此,我们将创建两个列表及其属性。


JS图表控件LightningChar教程:创建带有 2D 和 3D 频谱图的 JS 仪表板-7.jpg


  • 名称:频道名称。此属性可用作图表的标题。
  • data: 分配我们要分配给每个通道的字节数组。
  • columnIndex: 指定仪表板中的列,我们的图表将放置在其中。
本次的介绍就到这里了,下篇文章将介绍后面的相关内容,点击查看全部LightningChart JS使用教程
LightningChart JS中文教程,视频,Demo,示例,帮助文档,疑难解答-慧都网

LightningChart JS是性能最高的JavaScript图表库,专注于实时数据可视化。
广告圈
6027 查看 0 0 反对

说说我的看法高级模式

您需要登录后才可以回帖 登录|立即注册

还没人评论此主题哦

相关阅读