热力图


备注

当前组件已支持 新版配置面板,文档默认按新版界面说明。你可以随时在图表配置面板的右上角切换,不影响配置内容。


热力图将数据值映射为色块颜色,以颜色的深浅或分段配色展示数据分布和密度,帮助快速识别数据中的规律、峰值和异常区域。


heatmap


本文介绍热力图的特殊配置。有关各图表通用的配置项,如 过滤器 标签页、其它 标签页的内容,参见 图表通用配置。

热力图的类型


添加组件时,热力图 分组下提供以下预设:

热力图预设

样式

描述

推荐场景

基础热力图

../_images/heatmap1.png

将指标数值映射为色块配色,展示二维网格上的数据分布。

查看设备在不同时段的温度分布、各区域的能耗强度。

热力图(带标记)

../_images/heatmap_with_mark.png

在基础热力图上标出极值所在的色块。

需要直接定位峰值或谷值,例如找出负载最高的时段。


两个预设的差异仅在于 标记最小值、标记最大值、边线 等配置项的默认状态,创建后可随时在样式中切换,也可以在 样式 标签页顶部通过 快捷样式切换 换用另一个预设。

热力图的数据


热力图以 指标 决定色块颜色,通过 维度 和 对比 分别定义两个方向上的分类。

有关数据源、数据项的通用配置信息,参见 图表通用配置 > 配置数据。

维度


维度 定义 X 轴(横向)上的分类,可添加 0 个或 1 个。例如将”小时”作为维度,X 轴按 0 时、1 时、2 时……排列色块列。

对比


对比 定义 Y 轴(纵向)上的分类,可添加 0 个或 1 个。例如将”设备编号”作为对比,Y 轴按设备排列色块行。


备注

维度和对比同时配置时才构成完整的二维网格。只配置其中一个时,另一个方向没有分类,色块排成单行或单列。两者都不配置时组件显示为空状态。

指标


指标 决定每个色块的颜色,必须且只能添加 1 个。色块由维度值和对比值的交叉位置定位,其颜色由该位置的指标值经 着色方式 换算得出。


备注

提示框中指标数值的小数位数、自适应单位和单位名称取自 Y 轴 的相关配置项(小数位数、自适应单位、名称),未填写单位名称时回退为指标数据项自身的单位。

数据的排列规则


  • 维度值和对比值都按去重后的取值生成轴类目,重复记录不会生成额外的行或列。

  • 维度或对比取值为空、null 或纯空白字符的数据行不参与绘制。

  • 数据项的 排序 设置决定色块在对应轴上的排列顺序,参见 图表通用配置 > 对数值排序。


热力图的样式


样式 标签页按 标题、组件、色块、坐标轴 和 图例 等区块组织。有关标题、组件等通用样式,参见 图表通用配置 > 配置样式。

色块

着色方式


着色方式 决定指标数值如何映射为色块颜色,是热力图最核心的配置项,可选 渐变(默认)或 分段。选择后,面板只显示对应方式的配置项。

  • 渐变:把连续数值映射为一段平滑的颜色过渡,适合温度、功率、湿度等连续变化的数值。

  • 分段:把数值按区间或字符串分档,每档使用一种固定颜色,适合需要明确分级的数据,例如把设备状态分为正常、警告、故障三档。

渐变


选择 渐变 后显示该配置项,用于指定渐变的两端。

  • 自动:默认勾选,由当前主题的配色和数据的实际最小值、最大值决定渐变范围。勾选时 从 和 至 的颜色不可编辑。

  • 从 / 至:取消勾选 自动 后可分别指定渐变起止的数值和颜色。数值最小可填 0,不接受负数;留空或非法时,回退为数据中的实际最小值和最大值;两端之间的数值按比例插值。


备注

手动指定 从 和 至 后,指标值落在该范围之外的色块不着色,在图表中不显示。

颜色规则


选择 分段 后显示该配置项。点击 设置分段匹配规则 打开弹窗,先选择 匹配类型,再填写对应的规则表。两种类型的规则表互斥显示,只有当前选中类型的规则生效。

按数值区间分档


匹配类型 选择 数值区间(默认)时,按指标数值的大小分档。点击 添加 新增一行规则,每行填写 从、至 和 展示颜色。

  • 一行规则的匹配范围是左开右闭:指标值大于 从、且小于等于 至 时,色块使用该行的 展示颜色。

  • 没有被任何规则覆盖的数值,使用 不匹配下列规则时展示的颜色。包括各行之间的空隙,以及最小的 从 之下、最大的 至 之上的部分。

  • 从 和 至 都留空,或 从 大于 至 的规则无效,会被忽略。全部规则都无效时,所有色块都不着色,图例也不显示。

按字符串分档


匹配类型 选择 匹配字符串 时,按指标值的文本精确匹配。点击 添加 新增一行规则,每行填写 匹配字符串、展示字段 和 展示颜色。

  • 指标值与某行的 匹配字符串 相同时,色块使用该行的 展示颜色。比较时忽略 匹配字符串 的首尾空格。

  • 展示字段 是命中该行时在图例和提示框中显示的名称,点击地球图标可配置多语言。留空则显示原始的指标值。

  • 同一个字符串填写了多行时,只有第一行生效。

  • 没有命中任何规则的色块不着色,在图表中不显示。


备注

匹配字符串 类型下也显示 不匹配下列规则时展示的颜色,但该配置项不生效,未命中的色块一律不着色。如需为未命中的数据指定颜色,请使用 数值区间 类型。

边线


边线 是每个色块四周的边框。默认隐藏,点击眼睛按钮 eye 可启用,启用后可设置线型、粗细(pt)和颜色。色块较大或需要清晰区分格子时适合启用。

标记最小值


勾选后,在指标值最小的色块上叠加 Min 文字标记,便于定位数据中的谷值。

标记最大值


勾选后,在指标值最大的色块上叠加 Max 文字标记,便于定位数据中的峰值。


备注

当所有色块的指标值完全相同时,极值标记不显示。若有多个色块同时取到极值,这些色块都会被标记。

坐标轴


区块顶部提供 显示 X 轴 和 显示 Y 轴 两个勾选项,取消勾选后对应的轴样式折叠面板随之隐藏。热力图只有 X 轴和 Y 轴,不提供副 Y 轴。

热力图的两条轴都是分类轴,配置项是通用轴配置的子集。下面按轴列出实际提供的项目,各项含义点击链接查看。

两条轴共有的配置项


热力图不提供以下通用项:单位字体、标签长度、显示最大值标签、轴线范围。

X 轴


X 轴承载 维度,标签字段类型 默认为 类别,另外提供:

  • 选 值 时显示 格式(auto、none、k、m、g)。

  • 选 时间 时显示 关联规则,用于指定时间标签的显示格式:

    • 不勾选 关联全局过滤器(默认)时,就地显示 格式类型(内置 或 自定义)和 格式 两个下拉框,所有时间标签统一使用该格式。

    • 勾选 关联全局过滤器 后,下拉框变为 设置分段匹配规则 按钮。点击打开弹窗,先选择要关联的导航器参数或全局过滤器,再逐条添加规则,为不同的过滤器值分别指定时间格式。

X 轴不提供 自适应单位、小数位数、插补方式、窗口起始时间 和 窗口结束时间。关联规则 的规则表中也不提供 粒度 列。

Y 轴


Y 轴承载 对比,标签字段类型 默认为 类别,另外提供:

  • 自适应单位。

  • 选 值 时显示 格式 和 小数位数(不提供 自动舍弃末尾零)。

  • 选 时间 时显示 格式类型 和 格式。

Y 轴不提供 插补方式 和 关联规则。

备注

Y 轴的 自适应单位、小数位数 和 名称 同时决定提示框中指标数值的换算方式,参见 指标。因此即使 对比 是文本字段,这几项也会影响提示框。

图例


热力图的图例说明色块颜色与数值的对应关系。顶部的 图例 按钮组可选 无图例 或 有图例,选择 无图例 时以下配置项隐藏。

图例的形态由 着色方式 决定,不需要单独配置:

  • 着色方式 为 渐变 时,图例是一条连续的色带,两端标注数值,可拖动滑块筛选数据。

  • 着色方式 为 分段 时,图例是一组分离的色块,每条颜色规则对应一个色块。数值区间类型下每个色块标注该档的区间,匹配字符串类型下标注规则中填写的 展示字段。可点击图例来隐藏数据。


以下配置项对两种形态都生效:

  • 图例位置:设置图例在组件中的位置,可选底部居中(默认)、左侧、顶部居中、顶部居右和右侧。

  • 大小:设置图例色块的 宽度 和 高度(px)。勾选 自动 时由系统按组件尺寸计算。

  • 图例字体:配置图例文字的字体、字号和颜色。

  • 滑动精度:控制图例数值及拖动筛选时的小数位数,可选 0、1、2,默认 0。仅当 着色方式 为 渐变 时显示。


备注

  • 着色方式 为 分段、但 颜色规则 中一条有效规则都没有时,图例不显示,看不出与 渐变 的区别。需要先添加至少一条规则,图例才会变成分离的色块。

  • 热力图的图例不提供 紧凑布局 和 图例边距。

其它设置


其它 标签页提供热力图专属的 显示鼠标悬停时提示,默认勾选。取消勾选后,鼠标悬浮在色块上不再弹出提示框。

热力图不响应 联动 ID,填写后不产生任何效果。其余通用项参见 图表通用配置 > 配置其他项。

运行时交互


以下是热力图在运行时的交互行为:

  • 提示框:需在 其它 标签页勾选 显示鼠标悬停时提示(默认勾选)才会弹出。鼠标悬浮在色块上时,提示框以 X: 和 Y: 开头显示该色块的两个分类值,随后显示色块颜色和指标值(含单位)。着色方式 为 分段 且匹配类型为 匹配字符串 时,显示规则中配置的 展示字段 而非原始数值。无数据的格子不弹出提示框内容。

  • 图例筛选:需在 样式 > 图例 中选择 有图例。渐变 着色下可拖动色带两端的滑块,只保留落在所选数值范围内的色块;分段 着色下可点击图例色块,隐藏或显示对应档位,被隐藏档位的色块不再着色。两种方式都只影响图表的显示,不影响导出的数据。

  • 组件联动:热力图可作为联动源,在 过滤器 标签页的 联动其它组件 区域配置,触发行为为 点击 :raw-html-m2r:`<维度名>` 区域。终端用户点击色块后,系统以该色块的 X 轴分类值触发联动,被选中的列同时以半透明色带标记。配置方法参见 图表联动其它组件。