热力图¶
备注
当前组件已支持 新版配置面板,文档默认按新版界面说明。你可以随时在图表配置面板的右上角切换,不影响配置内容。
热力图将数据值映射为色块颜色,以颜色的深浅或分段配色展示数据分布和密度,帮助快速识别数据中的规律、峰值和异常区域。
本文介绍热力图的特殊配置。有关各图表通用的配置项,如 过滤器 标签页、其它 标签页的内容,参见 图表通用配置。
热力图的类型¶
添加组件时,热力图 分组下提供以下预设:
热力图预设 |
样式 |
描述 |
推荐场景 |
|---|---|---|---|
基础热力图 |
|
将指标数值映射为色块配色,展示二维网格上的数据分布。 |
查看设备在不同时段的温度分布、各区域的能耗强度。 |
热力图(带标记) |
|
在基础热力图上标出极值所在的色块。 |
需要直接定位峰值或谷值,例如找出负载最高的时段。 |
两个预设的差异仅在于 标记最小值、标记最大值、边线 等配置项的默认状态,创建后可随时在样式中切换,也可以在 样式 标签页顶部通过 快捷样式切换 换用另一个预设。
热力图的数据¶
热力图以 指标 决定色块颜色,通过 维度 和 对比 分别定义两个方向上的分类。
有关数据源、数据项的通用配置信息,参见 图表通用配置 > 配置数据。
维度¶
维度 定义 X 轴(横向)上的分类,可添加 0 个或 1 个。例如将”小时”作为维度,X 轴按 0 时、1 时、2 时……排列色块列。
对比¶
对比 定义 Y 轴(纵向)上的分类,可添加 0 个或 1 个。例如将”设备编号”作为对比,Y 轴按设备排列色块行。
备注
维度和对比同时配置时才构成完整的二维网格。只配置其中一个时,另一个方向没有分类,色块排成单行或单列。两者都不配置时组件显示为空状态。
指标¶
指标 决定每个色块的颜色,必须且只能添加 1 个。色块由维度值和对比值的交叉位置定位,其颜色由该位置的指标值经 着色方式 换算得出。
备注
提示框中指标数值的小数位数、自适应单位和单位名称取自 Y 轴 的相关配置项(小数位数、自适应单位、名称),未填写单位名称时回退为指标数据项自身的单位。
数据的排列规则¶
维度值和对比值都按去重后的取值生成轴类目,重复记录不会生成额外的行或列。
维度或对比取值为空、null 或纯空白字符的数据行不参与绘制。
数据项的 排序 设置决定色块在对应轴上的排列顺序,参见 图表通用配置 > 对数值排序。
热力图的样式¶
样式 标签页按 标题、组件、色块、坐标轴 和 图例 等区块组织。有关标题、组件等通用样式,参见 图表通用配置 > 配置样式。
色块¶
着色方式¶
着色方式 决定指标数值如何映射为色块颜色,是热力图最核心的配置项,可选 渐变(默认)或 分段。选择后,面板只显示对应方式的配置项。
渐变:把连续数值映射为一段平滑的颜色过渡,适合温度、功率、湿度等连续变化的数值。
分段:把数值按区间或字符串分档,每档使用一种固定颜色,适合需要明确分级的数据,例如把设备状态分为正常、警告、故障三档。
渐变¶
选择 渐变 后显示该配置项,用于指定渐变的两端。
自动:默认勾选,由当前主题的配色和数据的实际最小值、最大值决定渐变范围。勾选时 从 和 至 的颜色不可编辑。
从 / 至:取消勾选 自动 后可分别指定渐变起止的数值和颜色。数值最小可填 0,不接受负数;留空或非法时,回退为数据中的实际最小值和最大值;两端之间的数值按比例插值。
备注
手动指定 从 和 至 后,指标值落在该范围之外的色块不着色,在图表中不显示。
颜色规则¶
选择 分段 后显示该配置项。点击 设置分段匹配规则 打开弹窗,先选择 匹配类型,再填写对应的规则表。两种类型的规则表互斥显示,只有当前选中类型的规则生效。
按数值区间分档¶
匹配类型 选择 数值区间(默认)时,按指标数值的大小分档。点击 添加 新增一行规则,每行填写 从、至 和 展示颜色。
一行规则的匹配范围是左开右闭:指标值大于 从、且小于等于 至 时,色块使用该行的 展示颜色。
没有被任何规则覆盖的数值,使用 不匹配下列规则时展示的颜色。包括各行之间的空隙,以及最小的 从 之下、最大的 至 之上的部分。
从 和 至 都留空,或 从 大于 至 的规则无效,会被忽略。全部规则都无效时,所有色块都不着色,图例也不显示。
按字符串分档¶
匹配类型 选择 匹配字符串 时,按指标值的文本精确匹配。点击 添加 新增一行规则,每行填写 匹配字符串、展示字段 和 展示颜色。
指标值与某行的 匹配字符串 相同时,色块使用该行的 展示颜色。比较时忽略 匹配字符串 的首尾空格。
展示字段 是命中该行时在图例和提示框中显示的名称,点击地球图标可配置多语言。留空则显示原始的指标值。
同一个字符串填写了多行时,只有第一行生效。
没有命中任何规则的色块不着色,在图表中不显示。
备注
匹配字符串 类型下也显示 不匹配下列规则时展示的颜色,但该配置项不生效,未命中的色块一律不着色。如需为未命中的数据指定颜色,请使用 数值区间 类型。
边线¶
边线 是每个色块四周的边框。默认隐藏,点击眼睛按钮
可启用,启用后可设置线型、粗细(pt)和颜色。色块较大或需要清晰区分格子时适合启用。
标记最小值¶
勾选后,在指标值最小的色块上叠加 Min 文字标记,便于定位数据中的谷值。
标记最大值¶
勾选后,在指标值最大的色块上叠加 Max 文字标记,便于定位数据中的峰值。
备注
当所有色块的指标值完全相同时,极值标记不显示。若有多个色块同时取到极值,这些色块都会被标记。
坐标轴¶
区块顶部提供 显示 X 轴 和 显示 Y 轴 两个勾选项,取消勾选后对应的轴样式折叠面板随之隐藏。热力图只有 X 轴和 Y 轴,不提供副 Y 轴。
热力图的两条轴都是分类轴,配置项是通用轴配置的子集。下面按轴列出实际提供的项目,各项含义点击链接查看。
X 轴¶
X 轴承载 维度,标签字段类型 默认为 类别,另外提供:
Y 轴¶
Y 轴承载 对比,标签字段类型 默认为 类别,另外提供:
Y 轴不提供 插补方式 和 关联规则。
备注
Y 轴的 自适应单位、小数位数 和 名称 同时决定提示框中指标数值的换算方式,参见 指标。因此即使 对比 是文本字段,这几项也会影响提示框。
图例¶
热力图的图例说明色块颜色与数值的对应关系。顶部的 图例 按钮组可选 无图例 或 有图例,选择 无图例 时以下配置项隐藏。
图例的形态由 着色方式 决定,不需要单独配置:
着色方式 为 渐变 时,图例是一条连续的色带,两端标注数值,可拖动滑块筛选数据。
着色方式 为 分段 时,图例是一组分离的色块,每条颜色规则对应一个色块。数值区间类型下每个色块标注该档的区间,匹配字符串类型下标注规则中填写的 展示字段。可点击图例来隐藏数据。
以下配置项对两种形态都生效:
图例位置:设置图例在组件中的位置,可选底部居中(默认)、左侧、顶部居中、顶部居右和右侧。
大小:设置图例色块的 宽度 和 高度(px)。勾选 自动 时由系统按组件尺寸计算。
图例字体:配置图例文字的字体、字号和颜色。
滑动精度:控制图例数值及拖动筛选时的小数位数,可选 0、1、2,默认 0。仅当 着色方式 为 渐变 时显示。
备注
着色方式 为 分段、但 颜色规则 中一条有效规则都没有时,图例不显示,看不出与 渐变 的区别。需要先添加至少一条规则,图例才会变成分离的色块。
热力图的图例不提供 紧凑布局 和 图例边距。
其它设置¶
其它 标签页提供热力图专属的 显示鼠标悬停时提示,默认勾选。取消勾选后,鼠标悬浮在色块上不再弹出提示框。
热力图不响应 联动 ID,填写后不产生任何效果。其余通用项参见 图表通用配置 > 配置其他项。
运行时交互¶
以下是热力图在运行时的交互行为:
提示框:需在 其它 标签页勾选 显示鼠标悬停时提示(默认勾选)才会弹出。鼠标悬浮在色块上时,提示框以
X:和Y:开头显示该色块的两个分类值,随后显示色块颜色和指标值(含单位)。着色方式 为 分段 且匹配类型为 匹配字符串 时,显示规则中配置的 展示字段 而非原始数值。无数据的格子不弹出提示框内容。图例筛选:需在 样式 > 图例 中选择 有图例。渐变 着色下可拖动色带两端的滑块,只保留落在所选数值范围内的色块;分段 着色下可点击图例色块,隐藏或显示对应档位,被隐藏档位的色块不再着色。两种方式都只影响图表的显示,不影响导出的数据。
组件联动:热力图可作为联动源,在 过滤器 标签页的 联动其它组件 区域配置,触发行为为 点击 :raw-html-m2r:`<维度名>` 区域。终端用户点击色块后,系统以该色块的 X 轴分类值触发联动,被选中的列同时以半透明色带标记。配置方法参见 图表联动其它组件。