彩票走势图

JS图表控件LightningCharts JS使用教程:创建一个带有 2D 和 3D 频谱图的 JS 仪表板

翻译|使用教程|编辑:董玉霞|2022-05-19 14:17:29.210|阅读 210 次

概述:在本文中,我们将创建一个带有 2D 和 3D 频谱图的 JS 仪表板。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

在本文中,我们将创建一个带有 2D 和 3D 频谱图的 JS 仪表板。创建这个项目的目的是解释如何创建一个振动分析应用程序,该应用程序将使用LightningCharts JS通过其lcjs 库为我们提供的 2D 和 3D 频谱图检查声波。

LightningCharts JS官方正版下载

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

可以通过聆听它们产生的声音强度来检测安全阀、空气冷却器和压缩元件的故障。

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

主要从以下几部分来介绍:

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

使用 Visual Studio 代码:

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

    JS图表控件LightningCharts JS

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

    JS图表控件LightningCharts JS

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

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

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

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

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

  3. 创建以下常量:
  4. JS图表控件LightningCharts JS

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

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

  7. 为音频波形创建调色板:
  8. JS图表控件LightningCharts JS

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

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

    • 名称:频道名称。此属性可用作图表的标题。
    • data: 分配我们要分配给每个通道的字节数组。
    • columnIndex: 指定仪表板中的列,我们的图表将放置在其中。

LightningChart JS | 下载试用

本次的介绍就到这里了,下篇文章将介绍后面的相关内容,点击查看全部LightningChart JS使用教程

LightningChart JS是性能最高的JavaScript图表库,专注于实时数据可视化。

想要了解或购买LightningChart JS正版授权的朋友,欢迎咨询


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP