您好，在本文中我们将创建一个带有 2D 和 3D 频谱图图表的 JS 仪表板。

创建这个项目的目的是解释如何创建一个振动分析应用程序，使我们能够使用LightningCharts JS通过其lcjs 库为我们提供的 2D 和 3D 频谱图来检查声波。

振动分析对于检测工业设备中的错误和/或故障非常重要（仅举一个例子）。

我曾经在这个行业工作过，我记得可以通过简单地聆听它们产生的声音强度来检测安全阀、空气冷却器和压缩元件中的故障。

在我们接下来要构建的图表中，我们将看到一个与类似案例相对应的音频文件。

鉴于简要介绍，看看您今天将创建的内容：

启动项目

在上一篇文章（使用 LightningChart JS 和NodeJS 创建饼图）中，我们使用Typescript、Node JS和LightningCharts JS从头开始创建了一个饼图。

对于本文，我们将使用相同的项目，因此我建议您从该文章下载模板或直接跳转并获取该项目的模板。使用 Visual Studio 代码， 

1. 创建文件 [dashboard.ts]

2. 添加文件 [audio2ch.json]

3. 新开一个终端，执行命令npm install

完成上述操作后，将安装编译项目所需的库。

在这些库中，将有一个@arction/lcjs 库，其中包含将帮助我们构建图表的类。

对仪表板、调色板和频道列表进行编码

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

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

2. 创建以下常量：
   
   

• [historyMS] = 将影响分析声波的速度（毫秒）（值越低，速度越高）。

• [sampleRateHZ] = 每秒采样数。

• [sampleIntervalMS] = 影响音频波形在图表上显示的每秒帧数。

3. 创建显示振动分析频谱图的仪表板：
   
   

   我们的仪表板将有两列和两行。现在分配您喜欢的主题和行的高度。

4. 为音频波创建调色板：

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

5. 创建频道列表
   在我们的JSON文件中，我们有两个字节数组，每个字节对应一个频道，因此，我们将创建两个列表及其属性。
   
   
   name：频道的名称。此属性可用作图表的标题。
   data： 分配我们要分配给每个通道的字节数组。
   columnIndex： 指定仪表板中的列，我们的图表将放置在该列中。

创建 2D 和 3D 频谱图

下面解释的代码将在.map 函数内执行，这意味着仪表板中的对象将根据我们的 [ channelList ] 对象中存在的通道数创建。

getDefaultAxisX =获取对ChartXY的默认 X 轴 的 引用。

这将始终返回对离图表最近的X 轴的引用（从底部开始）。[ getDefaultAxisX ]下面的所有方法只会影响 X 轴。（如果您需要引用 Y 轴 [ getDefaultAxisY ]，则逻辑相同）。 

setTickStrategy = 它以毫秒为单位显示我们声波的时间值。

 setScrollStrategy = 在指定轴上分配滚动行为。

setInterval =设置坐标轴刻度间隔。参数可能会根据图表类型而改变。

在这种情况下，起始比例值是从 [historyMs] 常量中获得的。0 等于标尺的终值。

setTitle = 在指定轴上显示的标题。

这些相同的属性将应用于3D 图表：

我们将分配表示音频波所需的图表类型，在这种情况下，我们将使用2D 和 3D 频谱图，这种可视化是实时完成的，并模拟振动分析应用程序的音频指标实时测量、分析和显示它们：

对于我们的2D 图表，我们将使用 [ addHeatmapScrollingGridSeries ] 类。在LightningChart JS 文档中了解有关此属性的更多信息。  

这个类将允许我们使用HeatmapGrid图表来表示我们的音频波形。

对于我们的3D 图表，我们将使用 [ addSurfaceScrollingGridSeries ] 类。

配置无限传输

[ setInterval]函数从一组静态数据配置无限流。

它使用 [ bufferIncomingSamples ] 函数，该函数负责保证静态采样率，即使输入数据可能不同。 这是通过跳过太频繁的样本和复制相距太远的样本来完成的。

可以通过更改 [ sampleRateHz ]的值来简单地设置精度。

[缓冲区传入样本]：

用于振动测量和监测的频谱图

频谱图只是可用于监控和可视化振动数据的图表示例之一。其他振动图表包括多通道数据监控图表、音频可视化图表或频谱图 XY 投影图表。 

在振动分析过程中，振动图表显示通过连接到机械的多个传感器收集的数据。这些传感器（可能包括三轴加速度计）记录了稍后在分析过程中使用的数据，将有助于检测机器结构和功能中的异常情况。

可视化振动数据的最终目标是确保持续监控工业机械数据，帮助检测功能问题，并帮助应用预防性和纠正性维护。 

得益于先进的 WebGL 渲染和 GPU 加速技术，LightningChart JS 通过提供可以实时处理数十亿个数据点的最高性能振动图表来支持振动分析应用程序的开发。

项目 (.ZIP)

这是一个指向 zip 项目的链接，您可以使用它生成您自己的带有 LightningChart JS 2D 和 3D 频谱图的振动分析应用程序。

下载项目

用于桌面、Web 和移动应用程序开发的LightningChart ® 数据可视化库