在本文中，我們將創(chuàng)建一個(gè)帶有 2D 和 3D 頻譜圖的 JS 儀表板。創(chuàng)建這個(gè)項(xiàng)目的目的是解釋如何創(chuàng)建一個(gè)振動(dòng)分析應(yīng)用程序，該應(yīng)用程序?qū)⑹褂?a target="_blank">LightningCharts JS通過其lcjs 庫為我們提供的 2D 和 3D 頻譜圖檢查聲波。

LightningCharts JS官方正版下載

振動(dòng)分析對于檢測工業(yè)設(shè)備中的錯(cuò)誤和/或故障非常重要（僅舉一個(gè)例子）。

可以通過聆聽它們產(chǎn)生的聲音強(qiáng)度來檢測安全閥、空氣冷卻器和壓縮元件的故障。

使用我們接下來要構(gòu)建的圖表，我們將看到一個(gè)與類似案例對應(yīng)的音頻文件。

主要從以下幾部分來介紹：

• 啟動(dòng)項(xiàng)目
• 對儀表板、調(diào)色板和頻道列表進(jìn)行編碼
• 創(chuàng)建 2D 和 3D 頻譜圖
• 配置無限傳輸
• 振動(dòng)分析頻譜圖前言
• 下載項(xiàng)目 (.zip)
• 經(jīng)常問的問題

啟動(dòng)項(xiàng)目

使用 Visual Studio 代碼：

1. 創(chuàng)建文件 [dashboard.ts]
2. 添加文件 [audio2ch.json]

   

3. 打開一個(gè)新終端并執(zhí)行命令 [npm install]

   

完成上述操作后，將安裝我們編譯項(xiàng)目所需的庫。

在這些庫中，將有一個(gè) @arction/lcjs 庫，其中包含有助于我們構(gòu)建圖表的類。

對儀表板、調(diào)色板和頻道列表進(jìn)行編碼。

將從我們的 [dashboard.ts] 文件開始。

1. 導(dǎo)入 JSON 文件，該文件將包含兩字節(jié)數(shù)組。一個(gè)是通道 1，另一個(gè)是通道 2?，F(xiàn)在，在常量中添加必要的類，以便能夠更輕松地使用它們。



2. 創(chuàng)建以下常量：



• [historyMS] = 將影響分析聲波的速度（毫秒）（值越低，速度越高）。
• [sampleRateHZ] = 每秒采樣數(shù)。
• [sampleIntervalMS] = 影響音頻波形在圖表上顯示的每秒幀數(shù)。
3. 創(chuàng)建將顯示用于振動(dòng)分析的頻譜圖的儀表板：



我們的儀表板將有兩列和兩行。現(xiàn)在分配您喜歡的主題和行的高度。

4. 為音頻波形創(chuàng)建調(diào)色板：



LUTSteps集合指定顏色及其對應(yīng)的值，以描述漸變中過渡點(diǎn)的位置和顏色。每個(gè)都表示為一個(gè)偶數(shù)對象{值：數(shù)字，顏色：顏色}。

5. 創(chuàng)建頻道列表
   在我們的JSON文件中，我們有兩個(gè)數(shù)組字節(jié)，每個(gè)字節(jié)對應(yīng)一個(gè)頻道，因此，我們將創(chuàng)建兩個(gè)列表及其屬性。



• 名稱：頻道名稱。此屬性可用作圖表的標(biāo)題。
• data： 分配我們要分配給每個(gè)通道的字節(jié)數(shù)組。
• columnIndex： 指定儀表板中的列，我們的圖表將放置在其中。

LightningChart JS | 下載試用

本次的介紹就到這里了，下篇文章將介紹后面的相關(guān)內(nèi)容，點(diǎn)擊查看全部LightningChart JS使用教程。

LightningChart JS是性能最高的JavaScript圖表庫，專注于實(shí)時(shí)數(shù)據(jù)可視化。

想要了解或購買LightningChart JS正版授權(quán)的朋友，歡迎咨詢