时间线


时间线以水平色带展示对象在一段时间内的状态变迁:每一行代表一个对象,行内的每一段色块代表该对象处于某一状态的持续区间。适合用于设备运行状态回溯、产线停机时段分析、班次状态对比等场景。


Timeline


本文介绍时间线的特殊配置。有关各图表通用的配置项,如 基本 标签页、过滤器 标签页的内容,参见 图表通用配置。

时间线的数据


时间线以 时间 字段和 状态 字段为一对输入,通过对比字段拆分行。有关数据源、数据项的通用配置信息,参见 图表通用配置 > 配置数据。

维度


维度 在时间线中承担时间字段的角色,数据项标签显示为 时间。必须且只能添加 1 个。数据按该字段排序后,每条记录的时间即为一个状态区间的起点,下一条记录的时间为其终点;最后一段延伸至窗口结束时间。

指标


指标 在时间线中承担状态字段的角色,数据项标签显示为 状态。必须且只能添加 1 个。相邻记录中状态值相同的部分会合并为一段连续色块,色块颜色由 状态枚举 中匹配到的枚举项决定。


备注

维度聚合 必须保持 否。选择 是 后,系统会为 状态 字段自动套用 求和 聚合,而状态值是字符串,求和结果为 0,所有状态都匹配不到 状态枚举 中的状态标识,图表中将不再绘制色块。

对比


对比 为可选字段,最多可添加 1 个。添加后,数据按该字段的值分组,每个值占据时间线中的一行,行的排列顺序为该值在数据中首次出现的顺序。未添加对比字段时,所有数据合并为一行。

备注

只要数据中出现过某个对比值,即使该值没有有效的时间记录,也会保留一个空行作为占位,便于对齐查看。

扩展


扩展 为可选字段,数据项标签显示为 扩展字段,数量不限。扩展字段不参与色块的绘制,而是作为每一段的附加信息,可在提示框、表格视图和导出文件中展示。添加后需在 额外展示字段 中选择实际要展示的字段。


时间线的样式


样式 标签页按基础配置、图表样式和其他分组。标题、组件内边距、背景等通用样式参见 图表通用配置 > 配置样式。

数据处理


数据处理 用于限定统计的时间窗口,并选择要展示的扩展字段。窗口同时决定时间轴的显示范围和最后一段色块的终点。

  • 窗口起始时间 / 窗口结束时间:设置统计的时间窗口起止时间,支持直接填写时间,也支持使用 @{参数名} 引用数据源查询参数、使用 ${参数名} 引用页面参数。留空或无法解析时,系统按数据中的实际最早和最晚时间推断窗口。

  • 参数名称 / 前移秒数:用于在发起查询前动态前移时间窗口。参数名称 指定要偏移的查询参数,前移秒数 设置前移量,取值 0 - 86400 秒,默认 0。两者需同时配置才生效;偏移在请求发出前完成,不改变返回数据。

额外展示字段


额外展示字段 是时间线特有的配置项,从已添加的 扩展 数据项中多选,被选中的字段会作为附加行显示在提示框中,并作为表格视图的列和导出文件的列。下拉列表的可选项随扩展字段的增减同步更新;移除扩展字段后,已选中但不再存在的字段会自动从选择中剔除。

通用配置

状态枚举


状态枚举 定义参与展示的状态及其颜色,是组件识别状态值的依据。选择 + 添加 新增枚举项,每项包含:

  • 状态标识:与数据中状态字段的原始值对应。支持用英文逗号分隔多个原始值,将它们归并为同一个状态,例如 200-001,200-002。

  • 状态名称:该状态在图表、图例和提示框中显示的名称。

  • 颜色:该状态对应的颜色。

  • 排序:枚举项的序号。在时间线中决定图例和占比图中各状态的排列顺序;在帕累托图中不生效,条形始终按时长降序排列。


备注

  • 未在状态枚举中定义的状态值不会显示在图表中。

  • 组件预置了 7 个示例枚举项,其状态名称为英文默认值,需按实际业务的状态取值修改。

展示模式


展示模式 决定组件的呈现形式,默认 时间线:

  • 时间线:以横向色带展示各行的状态区间,可缩放和平移。

  • 表格:以表格逐段列出状态、持续时间、起止时间和额外展示字段,支持按列排序和分页。


后续的 Timeline 样式 和 Table 样式 两个区块始终同时显示,不随 展示模式 隐藏。切换模式后,只有对应区块的配置项在图表上生效。

导出


勾选 导出 后,组件上显示导出按钮,终端用户可将数据导出为 Excel 文件。默认不勾选。导出内容的说明参见 运行时交互。

Timeline 样式


Timeline 样式 控制时间线视图的行、色块和占比图外观,仅当 展示模式 选择 时间线 时,下列配置生效:

  • 纵轴标签字体:配置左侧行标签(对比字段值)的字体、大小和颜色。

  • 时间轴字体:配置顶部时间轴刻度文字的字体、大小和颜色。

  • 行高:设置每一行的高度,取值 28 - 80 px,默认 40 px。行高不会为适应组件高度而被压缩;行数较多时区域内可纵向滚动。

  • 条形高度:设置行内色块的高度,取值 12 - 40 px,默认 24 px。该值应小于 行高,差值即为相邻行之间的空隙。

  • 显示占比图:默认勾选,在时间线右侧附加一列堆叠条,按状态汇总该行各状态的占比。取消勾选后仅保留时间线。

  • 显示时间轴标签:默认勾选,显示顶部的时间刻度。取消勾选后隐藏时间轴。

  • 占比图宽度比例:以百分比设置占比图占组件宽度的比例,取值 10 - 50%,默认 30%。

  • 占比图左间距:设置占比图与时间线之间的距离,取值 0 - 40 px,默认 20。

  • Y 轴标签最小宽度:为左侧行标签区域设定最小宽度,取值 0 - 500 px,默认 0(按内容自适应)。在多个时间线组件上下排列时,设为相同值可使各组件的时间轴左端对齐。

  • 占位条颜色:设置无数据区间的占位色块颜色,默认由主题决定。

Table 样式


Table 样式 控制表格视图的外观,仅当 展示模式 选择 表格 时,下列配置生效:

  • 表头字体:配置表头文字的字体、大小和颜色。

  • 内容字体:配置表格内容文字的字体、大小和颜色。

  • 每页行数:设置每页显示的行数,取值 5 - 100,默认 20。

图例


图例列出各状态的颜色和名称,并显示每个状态的汇总值。可以通过眼睛按钮 eye 隐藏图例。

  • 标签字体:配置状态名称的字体、大小和颜色。

  • 数值字体:配置状态汇总值的字体和大小。该配置项不提供颜色设置。

  • 对齐方式:设置图例项的排列方式,可选 左对齐、行居中对齐 和 自适应居中对齐,默认左对齐。

  • 图标尺寸:设置图例色块的尺寸,取值 8 - 32 px,默认 14 px。

  • 间距:设置相邻图例项之间的距离,取值 4 - 48 px,默认 16 px。

  • Checkbox 跟随状态颜色:勾选后,图例前的复选框使用该状态自身的颜色,而非默认主题色。默认不勾选。

  • 单行滚动:勾选后,图例强制排为一行,超出宽度时可横向滚动查看;未勾选时图例自动换行。默认不勾选。

运行时交互


以下是时间线在运行时的交互行为:

  • 图例筛选:需显示图例。点击图例项前的复选框可隐藏或显示对应状态。被隐藏的状态不参与图表、表格和占比汇总的展示,但不影响导出内容。

  • 汇总方式切换:需显示图例。图例区提供 百分比 和 持续时间 两个按钮,切换各状态汇总值以及占比图上标签的展示方式。该选择不会保存到组件配置中。

  • 缩放和平移:在终端页面的时间线视图中,按住 Ctrl 并滚动鼠标滚轮可缩放时间范围,拖动可平移;按住 Ctrl 拖出选框可放大到选定区间;双击恢复到初始窗口。

  • 提示框:鼠标悬浮到色块上时,提示框显示状态名称、持续时间、时间范围以及已选择的额外展示字段。悬浮到占比图上时,显示该行各状态的汇总明细。

  • 表格排序和分页:表格视图中可按对比、状态、持续时间、起止时间等列排序,并按 每页行数 分页。

  • 导出:启用 导出 后点击导出按钮,按行分工作表导出为 Excel 文件,列包含设备、状态、状态标识、持续时间、额外展示字段和起止时间。导出内容为全量数据,不受图例筛选影响;若状态标识配置了多个原始值,导出时会还原为各原始值的明细行。数据量超过 10 万行时会先提示确认。

  • 空状态:未配置时间字段或状态字段、或查询无数据时,显示”暂无数据”。