Heatmap 图,即热力图,是一种数据的可视化表现形式,其核心目的是使用颜色来展示数据的分布或密度情况。在热力图中,颜色的深浅代表数据值的大小或频数的多少,因此能够直观地展示数据的分布和密度情况。这种图表在数据分析领域具有广泛的应用,可以帮助人们快速识别数据中的模式、异常值和关系。
热力图可以用于表示两种变量的关系,颜色可以表示数据的数值大小。比如,可以用颜色深浅表示人口迁徙数量的大小,颜色越深表示人口迁徙数量越多。通过热力图,可以清晰地看出哪些地区之间的人口迁徙较为频繁,以及迁徙的数量大小。
例如,下图是一个日历热力图,颜色越深值就越大:
该示例使用 mysql 作为数据源,假如我们存在如下一个表格:
创建该表格的 SQL 语句如下:
CREATE TABLE `heatmap_data` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `days` int(10) DEFAULT NULL, `value1` decimal(10,4) DEFAULT NULL, `value2` decimal(10,4) DEFAULT NULL, `value3` decimal(10,4) DEFAULT NULL, `value4` decimal(10,4) DEFAULT NULL, `value5` decimal(10,4) DEFAULT NULL, `value6` decimal(10,4) DEFAULT NULL, `value7` decimal(10,4) DEFAULT NULL, PRIMARY KEY (`id`) );
对应的数据 SQL 语句如下:
INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (55, 1, 3.6352, 57.9696, 76.8670, 54.2158, 67.7649, 75.1237, 88.6092); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (56, 2, 33.2689, 15.6013, 71.2402, 45.9432, 67.3238, 46.5147, 74.0660); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (57, 3, 9.9894, 44.3112, 88.7688, 89.7108, 66.3098, 57.8038, 22.4705); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (58, 4, 61.9186, 9.8859, 75.2048, 93.7826, 47.0927, 77.1124, 19.6602); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (59, 5, 87.5755, 53.0426, 79.3135, 12.6325, 91.6075, 7.8611, 60.0594); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (60, 6, 35.3854, 9.0968, 9.0681, 7.1477, 59.7528, 18.1481, 75.4275); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (61, 7, 1.2185, 37.7472, 69.4974, 35.9529, 59.4726, 60.9304, 16.3719); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (62, 8, 58.5941, 52.0016, 38.8854, 3.2262, 7.7557, 68.9435, 27.1321); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (63, 9, 30.2452, 54.1204, 92.8520, 85.0368, 6.6021, 72.4832, 55.0847); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (64, 10, 93.9319, 83.0767, 91.2327, 3.5044, 73.4474, 39.5950, 51.6038); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (65, 11, 85.8032, 48.3024, 23.9684, 65.6924, 21.8768, 74.6972, 82.7421); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (66, 12, 63.4695, 96.8544, 50.0098, 95.5392, 6.6495, 6.0731, 9.9710); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (67, 13, 77.7877, 50.6517, 71.7097, 20.0884, 51.7108, 73.2813, 27.5313); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (68, 14, 64.5772, 94.2024, 3.7578, 46.6622, 64.1795, 75.9307, 21.0593); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (69, 15, 87.1209, 48.4986, 48.2529, 89.4885, 48.3813, 86.7189, 17.8968); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (70, 16, 67.7152, 37.3306, 3.8290, 86.7228, 47.8740, 88.2226, 84.3095); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (71, 17, 42.6872, 7.2331, 84.8861, 19.0844, 63.7390, 4.4450, 47.0425); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (72, 18, 3.1354, 9.9905, 85.6983, 50.3865, 72.8460, 52.4089, 86.3357); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (73, 19, 53.7572, 89.6035, 37.4702, 10.5565, 59.4452, 14.9720, 58.4554); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (74, 20, 81.6069, 67.8378, 26.8506, 54.0045, 88.3269, 35.5703, 93.5629); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (75, 21, 30.2184, 82.2732, 77.9963, 48.9961, 36.7695, 28.7869, 47.1562); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (76, 22, 77.9756, 29.0781, 10.8674, 51.0658, 43.6086, 37.3430, 40.8049); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (77, 23, 43.1667, 68.0187, 86.2738, 79.0349, 50.7612, 92.4393, 7.2659); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (78, 24, 20.2392, 42.7028, 7.0705, 54.2177, 68.5999, 95.9474, 25.4264); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (79, 25, 20.8832, 0.2398, 0.9648, 34.8155, 74.6550, 55.9558, 65.3928); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (80, 26, 88.7424, 22.1992, 43.2018, 74.1675, 27.6958, 57.2023, 4.5631); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (81, 27, 92.2669, 7.1656, 92.5670, 92.7430, 14.6291, 7.2418, 50.3977); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (82, 28, 87.7569, 78.0276, 96.7556, 58.5164, 74.2554, 76.1446, 11.9776); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (83, 29, 89.7469, 13.5518, 39.2902, 11.2877, 54.8072, 47.4733, 22.3900); INSERT INTO `heatmap_data` (`id`, `days`, `value1`, `value2`, `value3`, `value4`, `value5`, `value6`, `value7`) VALUES (84, 30, 86.9942, 37.4143, 60.3965, 22.3159, 71.8542, 3.0795, 70.7638);
打开 Grafana,创建 HeatMap 热力图,将下面 SQL 作为查询数据语句:
SELECT days,value1,value2,value3,value4,value5,value6,value7 FROM grafana.heatmap_data
然后,点击“”按钮查询数据,渲染热力图,效果如下图:
此设置决定数据是已经计算过的热力图(来自数据源/转换器),还是应该在面板中计算的热图。
此设置可确定如何将 X 轴分割成桶。您可以在大小输入中指定时间间隔。例如,时间范围为 1 小时,则 X 轴上的单元格宽度为 1 小时。
此设置可确定如何将 Y 轴划分为多个桶。
从以下 Y 轴数值刻度中选择一个:
linear - 线性刻度。
log (base 2) - 以 2 为底的对数刻度。
log (base 10) - 以 10 为底的对数刻度。
symlog - Symlog 标度。
定义 Y 轴的显示方式,可以选项如下图:
Left - 显示在左边
Right - 显示在右边
Hidden - 隐藏
配置单位,如下图:
此设置确定小数配置。如下图:
此设置可配置轴范围。
此设置可配置轴的宽度。
此设置可配置轴值。例如:
选择后,轴将以相反顺序显示。
在某些情况下,您可能需要显示多个 y 轴。例如,如果您有一个数据集同时显示随时间变化的温度和湿度,您可能希望为这两个序列显示两个单位不同的 y 轴。
您可以通过添加字段覆盖来实现这一目的。请根据需要多次执行上述步骤,添加所需的任意多个 Y 轴。
色谱控制着数值计数(在每个数据桶中)和分配给每个数据桶的颜色之间的映射。色谱最左边的颜色代表最小计数,最右边的颜色代表最大计数。使用浅色主题时,某些配色方案会自动颠倒。
您也可以将颜色模式更改为不透明。在这种情况下,颜色不会改变,但不透明度会随着水桶数量的增加而改变。
Mode
Scheme - 用单元格颜色表示的水桶值。
Scheme - 如果模式为方案,则选择颜色方案。
opacity - 用单元格不透明度表示的桶值。不透明单元格表示最大值。
Color - 单元格基色。
Scale - 将水桶值映射到不透明度的比例。
linear - 线性比例。水桶值线性映射到不透明度。
sqrt - 幂比例。单元格不透明度的计算公式为值 ^ k,其中 k 是配置的指数值。如果指数小于 1,将得到对数刻度。如果指数大于 1,则采用指数比例。如果指数为 1,刻度将与线性刻度相同。
Exponent - 指数值,大于 0。
默认情况下,Grafana 会根据最小值和最大值计算单元格颜色。通过 Min 和 Max,您可以覆盖这些值。将水桶值视为 Z 轴,Min 和 Max 分别视为 Z-Min 和 Z-Max。
Start - 用于计算单元格颜色的最小值。如果水斗值小于最小值,则会映射为 "最小 "颜色。系列最小值为默认值。
End - 用于计算单元颜色的最大值。如果水桶值大于最大值,则会映射为 "最大 "颜色。系列最大值为默认值。
使用这些设置来完善您的可视化效果。如下图:
Show tooltip - 显示热图工具提示。
Show Histogram - 在工具提示上显示 Y 轴直方图。直方图表示特定时间戳的水桶值分布。
Show color scale - 在工具提示上显示色标。色标表示水桶值和颜色之间的映射关系。启用 newVizTooltips 功能标志时可配置此选项。
选择是否要在可视化中显示热图图例。如下图:
设置用于显示示例数据的颜色。如下图: