尧图网站建设 
Label Studio TimeSeries Channel 标签完整指南参数详解、显示格式与源码实现【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本指南以 Label Studio 标签体系中的Channel数据通道子标签为核心讲解如何在TimeSeries对象标签内声明时序数据中的单条数据列并配合MultiChannel实现多通道分组可视化。读完本文你将掌握Channel全部参数的语义与默认值、基于 d3-format 的数值显示格式规则以及它们在前端编辑器源码中的实际解析与渲染行为可直接用于编写可运行的时序数据标注配置。概述Channel 在时序标注体系中的位置在 Label Studio 中TimeSeries是负责加载和展示时序数据的对象标签object tag而Channel是只能作为TimeSeries子标签出现的子标签subtag用于声明待绘制的数据列。时序数据的每个信号例如传感器读数、加速度、速度对应一个Channel每个Channel在图表上呈现为一条独立的折线。从源码角度看Channel在 web/libs/editor/src/tags/object/TimeSeries/Channel.jsx 中被注册其parentTypes被约束为[TimeSeries]也就是说它只能嵌套在TimeSeries标签内部使用。前端渲染组件HtxChannel会把单个 Channel 交给 TimeSeriesVisualizer.jsx 进行 D3 绘图。一个最小的时序标注配置如下View TimeSeries namedevice value$timeseries valueTypeurl timeColumntime Channel columnsensor1 / Channel columnsensor2 / /TimeSeries TimeSeriesLabels namelabel toNamedevice Label valueRun background#5b5/ Label valueWalk background#55f/ /TimeSeriesLabels /ViewChannel 参数一览Channel的全部参数定义在 docs/source/includes/tags/channel.md对应源码模型中的TagAttrs见 Channel.jsxParamTypeDefaultDescriptioncolumnstringcolumn name or index数据列名或索引[legend]stringdisplay name of the channel通道的显示名称[units]stringdisplay units name显示单位名[displayFormat]string数值显示格式字符串使用 d3-format 语法见下文[height]number200height of the plot绘图区高度[strokeColor]string#f48a42plot stroke color, expects hex value折线描边颜色十六进制[strokeWidth]number1plot stroke width折线宽度[markerColor]string#f48a42marker 颜色十六进制[markerSize]number0marker 尺寸0 表示不显示数据点标记[markerSymbol]numbercirclemarker 形状圆形[timeRange]stringdata range of x-axis / time axisx 轴/时间轴数据范围[dataRange]stringdata range of y-axis / data axisy 轴/数据轴范围[showAxis]stringshow or hide both axis是否显示双轴[fixedScale]boolean若为 false当前视图仅缩放以适配已显示的值若给定则覆盖TimeSeries的 fixedScale其中column是唯一必填参数它指定要绘制的数据列既可以是列名如sensor1也可以是列索引针对无表头的 CSV。源码中的columnNamegetter 会先检测纯数字列号将其映射为parent.headers中对应的表头名再统一转为小写进行数据查找Channel.jsxget columnName() { let column self.column; if (/^\d$/.test(column)) { column self.parent?.headers[column] || column; } return column.toLowerCase(); }displayFormatd3-format 数值显示格式详解displayFormat是Channel最有价值也最容易被忽略的参数。它直接控制图表上数值的格式化方式包括坐标轴刻度与鼠标悬停跟踪器上显示的值其语法来自 d3-format 的d3.format()在渲染时通过d3.format(item.displayformat)生成格式化函数见 TimeSeriesVisualizer.jsx。格式串的结构为[,][.precision][f|%]具体规则如下,—— 使用当前 locale 的分组符对千位进行分组,会把12345.6显示为12,345.6,.2f会显示为12,345.60。.precision—— 精度部分对于f/%类型表示小数点后的位数.3f会把12.3456显示为12.345、把1000显示为1000.000对于空类型无f/%后缀表示有效数字位数.3会把12.3456显示为12.3、1.2345显示为1.23、12345显示为1.23e4科学计数法。f—— 按浮点数处理默认精度为 6 位小数f会把12显示为12.000000.2f显示为12.00.0f会把12.34截为12。%—— 按百分比处理并自动乘 100%.0会把0.128显示为13%%.1会把1.2345显示为123.4%。在 TimeSeries.jsx 的源码中displayformat的默认值是.1f保留 1 位小数文档表格中的留空实际上对应源码中的默认格式。该默认格式同样应用于坐标轴刻度与跟踪器数值TimeSeriesVisualizer.jsx。Channel columntemperature displayFormat,.2f units°C / !-- 悬停时数值显示为 12,345.60 °C 形式 --通道外观控制颜色、线宽与数据点标记Channel提供了一套用于折线外观的参数其源码默认值定义在 Channel.jsxstrokeColor默认#f48a42折线描边颜色接收十六进制色值。若未显式指定TimeSeries或MultiChannel创建时会按通道索引从调色板 palette.js 自动分配颜色调色板顺序为grape → mango → kale → persimmon → sand → kiwi → canteloupe → fig → plum → blueberry不足时循环取用getChannelColor(idx)。strokeWidth默认1折线宽度像素。markerColor默认#f48a42数据点标记颜色同样支持自动配色。markerSize默认0数据点标记尺寸。默认 0 意味着不绘制离散数据点调大后会在每个数据点处绘制标记。markerSymbol默认circle标记形状。虽然文档表格中类型标注为number源码实际将其声明为字符串默认值为circleChannel.jsx。Channel columnsensor1 strokeColor#2196f3 strokeWidth2 markerSize3 markerSymbolcircle /从渲染实现看标记通过 SVGmarker元素生成其宽高直接使用item.markersizeTimeSeriesVisualizer.jsx折线本身则由 d3line()生成器绘制并区分全量折线line与当前可视范围切片lineSlice。坐标轴与视图范围控制height默认200单个通道绘图区的高度。timeRangex 轴时间轴的数据范围用于限定展示的时间窗口。dataRangey 轴数据轴的范围用于限定数值显示区间。showAxis控制是否显示坐标轴。源码中该参数为布尔类型默认true此外还额外支持showYAxis默认true单独控制 y 轴显隐。fixedScale若为false当前视图的 y 轴刻度只适配当前显示范围内的数值缩放时会重新计算若显式指定布尔值则覆盖父级TimeSeries的fixedScaleTimeSeries默认false。未指定时继承父级设置这正是types.maybe(types.boolean)Channel.jsx所表达的可选且可继承语义。y 轴刻度渲染使用d3.axisLeft/d3.axisRight并复用通道的formatValue作为刻度格式化函数TimeSeriesVisualizer.jsx因此displayFormat的变化会同步影响坐标轴刻度显示。将多个 Channel 分组MultiChannel当需要把多条信号叠加在同一张图上对比且希望共享一个图例容器时可以用MultiChannel把多个Channel包起来。MultiChannel自身位于 docs/source/tags/timeseries.md 的说明中其模型实现在 web/libs/editor/src/tags/object/TimeSeries/MultiChannel.jsx参数如下ParamTypeDefaultDescription[height]number200height of the plot[showAxis]booleantruewhether to show both axes[showYAxis]booleantruewhether to show the y-axis[fixedScale]booleanwhether to use a fixed scale for all channels. If not set, inherits from parent TimeSeries tagMultiChannel只能包含Channel子标签children: Types.unionArray([channel])且必须位于TimeSeries内部。它额外提供通道图例ChannelLegend和通道显隐切换能力toggleChannelVisibility/setHighlightedChannel见 MultiChannel.jsx多个通道同时显示 y 轴时会自动调整右边距以容纳双轴刻度。官方文档给出的分组示例含数据预览注释View TimeSeries namets value$timeseries valueTypeurl timeColumntime timeFormat%Y-%m-%d %H:%M:%S.%f MultiChannel Channel columnvelocity / Channel columnacceleration / /MultiChannel /TimeSeries TimeSeriesLabels namelabel toNamets Label valueRun backgroundred/ Label valueWalk backgroundgreen/ /TimeSeriesLabels /View实战示例与数据要求示例 1URL 加载的 CSV数值型时间列CSV 含time、sensor1、sensor2三列time列为数值时间轴必须保持递增有序View TimeSeries namedevice value$timeseries valueTypeurl timeColumntime Channel columnsensor1 / Channel columnsensor2 / /TimeSeries TimeSeriesLabels namelabel toNamedevice Label valueRun background#5b5/ Label valueWalk background#55f/ /TimeSeriesLabels /View示例 2任务 JSON 内嵌数据日期型时间列数据存放在任务字段ts中time列为日期字符串需要配合timeFormat解析View TimeSeries namedevice value$ts timeColumntime timeFormat%m/%d/%Y %H:%M:%S Channel columnsensor1 / Channel columnsensor2 / /TimeSeries /View数据前置条件来自文档与源码时间轴必须有序文档明确指出 time axis 必须排序否则TimeSeries无法正常工作。源码在 TimeSeries.jsx 中会逐点校验时间戳是否递增一旦发现非递增数据立即抛出错误错误信息会给出前两个异常值的位置。不要用 timeColumn 也能自动生成时间轴若希望使用自动生成的索引作为时间轴则不要设置timeColumn参数。源码中当timecolumn为空时会按数据长度生成0..n-1的索引列dataObjgetterTimeSeries.jsx。日期列必须配 timeFormat若timeColumn指向的值不是数值例如日期字符串而未提供timeFormat源码会直接抛出提示性错误要求补充timeFormat参数另外timeFormat中若出现%f微秒会给出警告——D3 不支持微秒源码会自动将%f替换为%L毫秒并尝试归一化数据TimeSeries.jsx。测试与验证依据仓库中针对时序通道的前端测试位于 web/libs/editor/src/tags/object/tests/TimeSeries.test.js覆盖了初始刷选brush范围计算、最小可见点数扩充MIN_POINTS_ON_SCREEN 10以及带毫秒timeFormat的时间解析逻辑。测试直接以TimeSeriesModel快照方式创建模型并调用updateValue可作为理解TimeSeries/Channel数据装载链路preloadValue → parseCSV → setData → updateValue的参考入口。此外完整的可运行标注模板见 docs/source/templates/time_series_classification.md其中演示了TimeSeries搭配Channel、TimeSeriesLabels与Choices组合的典型配置是上手练习的最佳起点。小结Channel是 Label Studio 时序标注配置的最小组成单元一个Channel声明一条数据列配合displayFormat控制数值与刻度显示通过strokeColor/markerSize等参数定制折线与数据点外观由MultiChannel实现多通道分组同图展示。理解其参数语义与源码中的解析路径columnName归一化、自动配色、d3-format 格式化即可从容编写从单传感器到多传感器分组对比的各种时序标注场景配置。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio TimeSeries Channel 标签完整指南：参数详解、显示格式与源码实现
Label Studio TimeSeries Channel 标签完整指南参数详解、显示格式与源码实现【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本指南以 Label Studio 标签体系中的Channel数据通道子标签为核心讲解如何在TimeSeries对象标签内声明时序数据中的单条数据列并配合MultiChannel实现多通道分组可视化。读完本文你将掌握Channel全部参数的语义与默认值、基于 d3-format 的数值显示格式规则以及它们在前端编辑器源码中的实际解析与渲染行为可直接用于编写可运行的时序数据标注配置。概述Channel 在时序标注体系中的位置在 Label Studio 中TimeSeries是负责加载和展示时序数据的对象标签object tag而Channel是只能作为TimeSeries子标签出现的子标签subtag用于声明待绘制的数据列。时序数据的每个信号例如传感器读数、加速度、速度对应一个Channel每个Channel在图表上呈现为一条独立的折线。从源码角度看Channel在 web/libs/editor/src/tags/object/TimeSeries/Channel.jsx 中被注册其parentTypes被约束为[TimeSeries]也就是说它只能嵌套在TimeSeries标签内部使用。前端渲染组件HtxChannel会把单个 Channel 交给 TimeSeriesVisualizer.jsx 进行 D3 绘图。一个最小的时序标注配置如下View TimeSeries namedevice value$timeseries valueTypeurl timeColumntime Channel columnsensor1 / Channel columnsensor2 / /TimeSeries TimeSeriesLabels namelabel toNamedevice Label valueRun background#5b5/ Label valueWalk background#55f/ /TimeSeriesLabels /ViewChannel 参数一览Channel的全部参数定义在 docs/source/includes/tags/channel.md对应源码模型中的TagAttrs见 Channel.jsxParamTypeDefaultDescriptioncolumnstringcolumn name or index数据列名或索引[legend]stringdisplay name of the channel通道的显示名称[units]stringdisplay units name显示单位名[displayFormat]string数值显示格式字符串使用 d3-format 语法见下文[height]number200height of the plot绘图区高度[strokeColor]string#f48a42plot stroke color, expects hex value折线描边颜色十六进制[strokeWidth]number1plot stroke width折线宽度[markerColor]string#f48a42marker 颜色十六进制[markerSize]number0marker 尺寸0 表示不显示数据点标记[markerSymbol]numbercirclemarker 形状圆形[timeRange]stringdata range of x-axis / time axisx 轴/时间轴数据范围[dataRange]stringdata range of y-axis / data axisy 轴/数据轴范围[showAxis]stringshow or hide both axis是否显示双轴[fixedScale]boolean若为 false当前视图仅缩放以适配已显示的值若给定则覆盖TimeSeries的 fixedScale其中column是唯一必填参数它指定要绘制的数据列既可以是列名如sensor1也可以是列索引针对无表头的 CSV。源码中的columnNamegetter 会先检测纯数字列号将其映射为parent.headers中对应的表头名再统一转为小写进行数据查找Channel.jsxget columnName() { let column self.column; if (/^\d$/.test(column)) { column self.parent?.headers[column] || column; } return column.toLowerCase(); }displayFormatd3-format 数值显示格式详解displayFormat是Channel最有价值也最容易被忽略的参数。它直接控制图表上数值的格式化方式包括坐标轴刻度与鼠标悬停跟踪器上显示的值其语法来自 d3-format 的d3.format()在渲染时通过d3.format(item.displayformat)生成格式化函数见 TimeSeriesVisualizer.jsx。格式串的结构为[,][.precision][f|%]具体规则如下,—— 使用当前 locale 的分组符对千位进行分组,会把12345.6显示为12,345.6,.2f会显示为12,345.60。.precision—— 精度部分对于f/%类型表示小数点后的位数.3f会把12.3456显示为12.345、把1000显示为1000.000对于空类型无f/%后缀表示有效数字位数.3会把12.3456显示为12.3、1.2345显示为1.23、12345显示为1.23e4科学计数法。f—— 按浮点数处理默认精度为 6 位小数f会把12显示为12.000000.2f显示为12.00.0f会把12.34截为12。%—— 按百分比处理并自动乘 100%.0会把0.128显示为13%%.1会把1.2345显示为123.4%。在 TimeSeries.jsx 的源码中displayformat的默认值是.1f保留 1 位小数文档表格中的留空实际上对应源码中的默认格式。该默认格式同样应用于坐标轴刻度与跟踪器数值TimeSeriesVisualizer.jsx。Channel columntemperature displayFormat,.2f units°C / !-- 悬停时数值显示为 12,345.60 °C 形式 --通道外观控制颜色、线宽与数据点标记Channel提供了一套用于折线外观的参数其源码默认值定义在 Channel.jsxstrokeColor默认#f48a42折线描边颜色接收十六进制色值。若未显式指定TimeSeries或MultiChannel创建时会按通道索引从调色板 palette.js 自动分配颜色调色板顺序为grape → mango → kale → persimmon → sand → kiwi → canteloupe → fig → plum → blueberry不足时循环取用getChannelColor(idx)。strokeWidth默认1折线宽度像素。markerColor默认#f48a42数据点标记颜色同样支持自动配色。markerSize默认0数据点标记尺寸。默认 0 意味着不绘制离散数据点调大后会在每个数据点处绘制标记。markerSymbol默认circle标记形状。虽然文档表格中类型标注为number源码实际将其声明为字符串默认值为circleChannel.jsx。Channel columnsensor1 strokeColor#2196f3 strokeWidth2 markerSize3 markerSymbolcircle /从渲染实现看标记通过 SVGmarker元素生成其宽高直接使用item.markersizeTimeSeriesVisualizer.jsx折线本身则由 d3line()生成器绘制并区分全量折线line与当前可视范围切片lineSlice。坐标轴与视图范围控制height默认200单个通道绘图区的高度。timeRangex 轴时间轴的数据范围用于限定展示的时间窗口。dataRangey 轴数据轴的范围用于限定数值显示区间。showAxis控制是否显示坐标轴。源码中该参数为布尔类型默认true此外还额外支持showYAxis默认true单独控制 y 轴显隐。fixedScale若为false当前视图的 y 轴刻度只适配当前显示范围内的数值缩放时会重新计算若显式指定布尔值则覆盖父级TimeSeries的fixedScaleTimeSeries默认false。未指定时继承父级设置这正是types.maybe(types.boolean)Channel.jsx所表达的可选且可继承语义。y 轴刻度渲染使用d3.axisLeft/d3.axisRight并复用通道的formatValue作为刻度格式化函数TimeSeriesVisualizer.jsx因此displayFormat的变化会同步影响坐标轴刻度显示。将多个 Channel 分组MultiChannel当需要把多条信号叠加在同一张图上对比且希望共享一个图例容器时可以用MultiChannel把多个Channel包起来。MultiChannel自身位于 docs/source/tags/timeseries.md 的说明中其模型实现在 web/libs/editor/src/tags/object/TimeSeries/MultiChannel.jsx参数如下ParamTypeDefaultDescription[height]number200height of the plot[showAxis]booleantruewhether to show both axes[showYAxis]booleantruewhether to show the y-axis[fixedScale]booleanwhether to use a fixed scale for all channels. If not set, inherits from parent TimeSeries tagMultiChannel只能包含Channel子标签children: Types.unionArray([channel])且必须位于TimeSeries内部。它额外提供通道图例ChannelLegend和通道显隐切换能力toggleChannelVisibility/setHighlightedChannel见 MultiChannel.jsx多个通道同时显示 y 轴时会自动调整右边距以容纳双轴刻度。官方文档给出的分组示例含数据预览注释View TimeSeries namets value$timeseries valueTypeurl timeColumntime timeFormat%Y-%m-%d %H:%M:%S.%f MultiChannel Channel columnvelocity / Channel columnacceleration / /MultiChannel /TimeSeries TimeSeriesLabels namelabel toNamets Label valueRun backgroundred/ Label valueWalk backgroundgreen/ /TimeSeriesLabels /View实战示例与数据要求示例 1URL 加载的 CSV数值型时间列CSV 含time、sensor1、sensor2三列time列为数值时间轴必须保持递增有序View TimeSeries namedevice value$timeseries valueTypeurl timeColumntime Channel columnsensor1 / Channel columnsensor2 / /TimeSeries TimeSeriesLabels namelabel toNamedevice Label valueRun background#5b5/ Label valueWalk background#55f/ /TimeSeriesLabels /View示例 2任务 JSON 内嵌数据日期型时间列数据存放在任务字段ts中time列为日期字符串需要配合timeFormat解析View TimeSeries namedevice value$ts timeColumntime timeFormat%m/%d/%Y %H:%M:%S Channel columnsensor1 / Channel columnsensor2 / /TimeSeries /View数据前置条件来自文档与源码时间轴必须有序文档明确指出 time axis 必须排序否则TimeSeries无法正常工作。源码在 TimeSeries.jsx 中会逐点校验时间戳是否递增一旦发现非递增数据立即抛出错误错误信息会给出前两个异常值的位置。不要用 timeColumn 也能自动生成时间轴若希望使用自动生成的索引作为时间轴则不要设置timeColumn参数。源码中当timecolumn为空时会按数据长度生成0..n-1的索引列dataObjgetterTimeSeries.jsx。日期列必须配 timeFormat若timeColumn指向的值不是数值例如日期字符串而未提供timeFormat源码会直接抛出提示性错误要求补充timeFormat参数另外timeFormat中若出现%f微秒会给出警告——D3 不支持微秒源码会自动将%f替换为%L毫秒并尝试归一化数据TimeSeries.jsx。测试与验证依据仓库中针对时序通道的前端测试位于 web/libs/editor/src/tags/object/tests/TimeSeries.test.js覆盖了初始刷选brush范围计算、最小可见点数扩充MIN_POINTS_ON_SCREEN 10以及带毫秒timeFormat的时间解析逻辑。测试直接以TimeSeriesModel快照方式创建模型并调用updateValue可作为理解TimeSeries/Channel数据装载链路preloadValue → parseCSV → setData → updateValue的参考入口。此外完整的可运行标注模板见 docs/source/templates/time_series_classification.md其中演示了TimeSeries搭配Channel、TimeSeriesLabels与Choices组合的典型配置是上手练习的最佳起点。小结Channel是 Label Studio 时序标注配置的最小组成单元一个Channel声明一条数据列配合displayFormat控制数值与刻度显示通过strokeColor/markerSize等参数定制折线与数据点外观由MultiChannel实现多通道分组同图展示。理解其参数语义与源码中的解析路径columnName归一化、自动配色、d3-format 格式化即可从容编写从单传感器到多传感器分组对比的各种时序标注场景配置。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考