在设备调试过程中，CSV（逗号分隔值）是一种非常常见的数据格式。无论设备通过串口、TCP、UDP 还是蓝牙通信，只要输出的是 CSV 数据，都可以通过 Bittly 进行解析并实时可视化。

这里将介绍如何在 Bittly 中完成 CSV 数据的解析，并将其绘制为折线图。

适用场景

CSV 数据解析通常有两种典型场景：

1. 设备主动上报数据

设备上电后自动发送 CSV 数据
常见于传感器、采集设备

👉 使用方式：通讯连接 + 解析规则

2. 指令请求响应

上位机发送指令
设备返回一条 CSV 数据

👉 使用方式：指令 + 响应解析

示例数据说明

在实际工业场景中，设备上传的数据通常不仅包含测量值，还会包含设备状态、报警信息等字段。所以我们演示的数据格式如下：

deviceA,1700000000,25.3,60,1013,OK
deviceA,1700000001,26.1,58,1012,WARN
deviceA,1700000002,24.8,65,1014,ERR

字段说明

字段	含义
deviceId	设备唯一标识（设备 KEY）
ts	时间戳（秒级）
temp	温度
hum	湿度
press	气压
status	设备状态 : OK=正常运行/ WARN=警告 / ERR = 故障 / 报警

对应正则表达式

(?<deviceId>[^,]+),(?<ts>\d+),(?<temp>[^,]+),(?<hum>[^,]+),(?<press>[^,]+),(?<status>[^,]+)

该表达式按 , 分隔一行 CSV 数据，并提取为以下字段：

deviceId：设备标识
ts：时间戳（数字）
temp / hum / press：测量数据
status：设备状态（如 OK / WARN / ERR）

其中：

(?<xxx>...) 表示命名字段
[^,]+ 表示匹配一个字段（直到遇到逗号）
\d+ 表示匹配数字（用于时间戳）

匹配成功后，将得到结构化数据对象，用于后续绘图或处理。

解析结果结构

{
  "deviceId": "deviceA",
  "ts": "1700000000",
  "temp": "25.3",
  "hum": "60",
  "press": "1013",
  "status": "OK"
}

设备主动上报数据解析

在该模式下，设备上电后会主动发送 CSV 数据，无需上位机发送指令。Bittly 可以直接通过通讯连接接收数据，并按照配置的解析规则进行解析与可视化。

例如：

传感器周期上报数据
设备实时数据流（串口 / TCP / 蓝牙）
无需请求即可持续输出的数据场景

1. 创建通讯连接

进入「通讯连接」模块：

新建连接（串口 / TCP / 蓝牙）
配置连接参数（如波特率、IP 等）

连接成功后，应能看到原始数据：

2. 配置数据分帧（关键步骤）

Bittly 的解析是以“数据帧”为单位进行的。如果存在收到的数据不是完整的一行 CSV，就需要配置分帧方式。例如：

半包：一条数据被拆成多次接收
粘包：多条数据拼接在一起

在这种情况下，可以通过「分帧」设置，选择适当的分帧方式（例如按换行符分帧），确保每次解析的数据都是完整的一帧。

CSV 推荐配置：

进入「分帧」设置：

分帧方式：分隔符
分隔符：\n 或 \r\n

配置完成后，每一帧数据应为一行完整 CSV。

3. 配置解析规则

进入「解析」配置，点击右侧 "+" 加号按钮新建解析规则：

名称： CSV 解析
解析方式：文本
解析规则 : (?<deviceId>[^,]+),(?<ts>\d+),(?<temp>[^,]+),(?<hum>[^,]+),(?<press>[^,]+),(?<status>[^,]+)

规则说明

当 Bittly 收到数据后，会按顺序尝试匹配解析规则
一旦某条规则匹配成功，数据就会被解析，并生成解析结果
匹配成功后，不会继续尝试后续规则
如果解析失败，该规则会被忽略，Bittly 会尝试下一条规则（如果有）

配置完成后，重新打开通讯连接，即可看到解析后的数据。

4. 绘制折线图

解析完成后，可以将数据直接绘制为折线图。

进入通讯连接中的折线图配置：

表达式说明

$("temp")

表示获取解析结果中的 temp 字段。

配置完成后，重新打开连接，即可看到折线图实时更新。

指令响应数据解析

在该模式下，设备不会主动上报数据，而是需要由上位机发送指令后，设备返回一条 CSV 数据。Bittly 可以对指令响应内容进行解析，并用于绘图或数据处理。

例如：

按需获取数据的设备
查询类协议（如读取寄存器、状态信息等）
非持续上报的数据场景

1. 创建指令

进入「指令模块」，新建一条指令：

2. 配置响应解析

在响应区域：

将查看方式改为：绘图
选择解析方式：正则表达式
点击正则表达式配置按钮编辑解析配置

填写解析表达式：

[^,]+,\d+,(?<temp>[^,]+),(?<hum>[^,]+),(?<press>[^,]+),[^,]+

需要注意的是，在使用分组匹配时，如果某个分组提取的结果不是数值类型，在用于绘图或计算时可能会导致错误。因此，建议仅对需要参与计算或展示的字段进行分组解析。

3. 查看图表

每次执行指令后，新数据会追加到图表中 :

需要注意的是，模拟数据每次仅仅响应一条数据，所以这里将每次清空数据取消了。

4. 自动执行指令

可以配置指令按固定间隔（如 1 秒）循环执行，从而实现持续的数据采集。

上位机面板应用

当需要对数据进行更完整的展示与交互时，可以使用上位机面板对数据进行统一管理与可视化。通过上位机面板，可以将通讯连接、数据解析结果与各类组件（如折线图、表格、按钮等）进行组合，构建一个完整的数据监控界面。

主动上报模式

在主动上报模式下，设备会持续发送数据。可以通过串口连接组件直接接收并完成解析，并将解析结果保存到变量中。随后，其他组件（如折线图、表格等）通过绑定该变量作为数据源，实现数据的统一展示与联动。

步骤：

从组件列表中选择 "串口连接" 组件添加到面板中：

接着选中串口组件，点击 解析数据 区域右侧的加号按钮添加解析数据处理动作。

选择解析规则为 ”CSV 解析“，然后配置动作类型为 变量 ，并新建原始数据类型的变量 解析数据 。

这样，当串口收到数据后便会进行数据解析，通过 CSV 解析 这条规则解析出的数据便会存放在变量 解析数据中 。

数据保存到变量后，我们只需要拖拽需要的数据输出组件即可，这里我们先拖拽一个表格组件来展示解析后的数据：

表格中，主要是将数据源选择为刚刚创建的 “解析数据” 变量，这样，当变量发生变更后，表格将会自动追加变量数据到表格底部。例如：

如果需要显示折线，那么只需要拖拽进来一个折线组件，并绑定数据源即可，例如：

需要注意的是，由于 解析数据 这个变量存储的是一个对象数据，不能直接交给折线图组件，所以我们需要使用表达式来提取折线图组件需要的数据。例如：

其中 $value 表示数据解析这个对象变量的值。 $value['temp'] 则表示仅仅获取温度值。

现在切换到运行模式可以看到数据如下：

指令模式

在指令模式下，设备仅在接收到指令后才返回数据。可以通过指令组件主动发起读写请求（如读取寄存器、写入参数等），并在响应返回后完成数据解析，将结果更新到对应变量中。随后，其他组件（如折线图、表格等）通过绑定该变量作为数据源，实现数据的统一展示与联动。

在上例的面板中，我们只需要移除串口连接组件，替换为使用定时器调用指令即可。

首先拖放定时器组件放到面板中：

这里我们需要将定时器的定时动作选择为 指令，然后选择对应获取数据的指令作为执行目标。这样定时器每个固定的时间便会自动执行所选择的指令。

其中指令配置如下：

解析模式为 [^,]+,\d+,(?<temp>[^,]+),(?<hum>[^,]+),(?<press>[^,]+),[^,]+ 同指令配置一致，也是通过正则表达式的分组来解析出属性。

其中 数据对象 表示整个解析后的数据对象，也可以选择某个属性直接付给其他的变量。

我们保存面板，切换到运行模式查看一下：

总结

在 Bittly 中，CSV 数据解析的核心，是将设备输出的原始字符串数据逐步转化为可直接使用的结构化数据，并最终用于可视化展示。整个过程从数据接收开始，经过分帧与解析，提取出关键字段，再结合表达式进行计算与处理，最终驱动折线图、表格等组件完成展示。

通过这一流程，Bittly 可以将原本难以理解的 CSV 数据，快速转化为直观、可交互的可视化结果，显著提升设备调试、数据分析与实时监控的效率。

Bittly CSV 数据解析与可视化指南