构建企业级监控平台系列（三十二）：Grafana 可视化面板 Heatmap 与 Gauge

前面介绍了 Grafana 入门与部署、仪表盘 DashBoard 、Dashboard 变量、Panel 面板和Time series（时间序列）、添加动态参数相关的知识点，今天我将详细的为大家介绍Grafana 可视化面板 Heatmap 与 Gauge相关知识，希望大家能够从中收获多多！如有帮助，请点在看、转发朋友圈支持一波！！！

Grafana Heatmap（热图）

Heatmap是Grafana的原生插件，Heatmap（热图）您可以查看一段时间内的直方图。要完全理解和使用此面板，您需要了解什么是直方图以及如何创建它们。阅读以下内容以快速了解术语直方图。

什么是直方图？直方图是用于表示数值分布的图形，直方图将数值分组到一个一个的bucket当中，然后计算每个bucket中值出现次数。在直方图上，X轴表示表示数值的范围，Y轴表示对应数值出现的频次。在直方图上，对于各数值出现的次数，分布是否对称都显示的很清楚。更多关于企业级监控平台系列的学习文章，请参阅：构建企业级监控平台，本系列持续更新中。

官方直方图示例：

上面的直方图向我们展示了几个时间序列的大多数值分布。我们可以很容易地看到大多数值落在240-300之间，峰值在260-280之间。直方图只是查看特定时间范围内的值分布。因此，您看不到任何趋势或分布随时间的变化，这是热图变得有用的地方。

Heatmap 热图示例：

热图就像直方图，但是随着时间的推移，每个时间片代表自己的直方图。不用单元格高度来表示频率，而是使用单元格并按存储桶中值的数量成比例地为单元格上色。直白一点说：Heatmap是用X轴表示时间，Y轴表示值的大小，bucket用来表示一个区间的值在对应时间点出现的次数。

Heapmap Panel的编辑页面中，主要包含5类配置选项，分别是：General、Metrics、Axes、Display、Time range。

使用Heatmap可视化Histogram类型的监控指标时，需要设置Format as选项为Heatmap。当使用Heatmap格式化数据后，Grafana会自动根据样本的中的le标签，计算各个Bucket桶内的分布，并且按照Bucket对数据进行重新排序。Legend format模板则将会控制Y轴中的显示内容。

默认情况下，Heatmap Panel会自行对PromQL查询出的数据进行分布情况统计，而在Prometheus中Histogram类型的监控指标其实是已经自带了分布的Bucket信息的，因此为了直接使用这些Bucket信息，我们需要在Axes选项中定义数据的Date format需要定义为Time series buckets。该选项表示Heatmap Panel不需要自身对数据的分布情况进行计算，直接使用时间序列中返回的Bucket即可。

使用Heatmap可视化其它类型样本分布情况

对于非Histogram类型，由于其监控样本中并不包含Bucket相关信息，因此在Metrics选项中需要定义Format as为Time series。

并且通过Axes选项中选择Data format方式为Time series。设置该选项后Heatmap Panel会要求用户提供Bucket分布范围的设置。

在Y轴（Y Axis）中需要通过Scale定义Bucket桶的分布范围，默认的Bucket范围支持包括：liner（线性分布）、log(base 10)（10的对数）、log(base 32)（32的对数）、log(base 1024)（1024的对数）等。

上图中设置的Scale为log(base 2)，那么在Bucket范围将2的对数的形式进行分布，即[1,2,4,8,…]。

更多关于企业级监控平台系列的学习文章，请参阅：构建企业级监控平台，本系列持续更新中。

热图绘图说明

Data format

时间序列:Grafana通过遍历所有时间序列值来进行分类。

时间序列桶:每个时间序列已经代表一个Y轴存储桶。时间序列名称（别名）必须是一个数值，代表存储桶的上限或下限间隔。Grafana不存储分区，因此隐藏了存储分区大小选项。

Buckets

buckets：当数据格式为时间序列存储段时，数据源将返回带有代表存储段绑定的名称的序列。但是取决于数据源，界限可能是上或下。此选项允许调整绑定类型。如果设置为 自动，则将根据面板的数据源类型选择绑定选项。

Size：Grafana使用“存储桶计数”和“大小”选项来计算热图中每个单元的大小。您可以通过计数（第一个输入框）或指定大小间隔来定义存储桶大小。对于Y轴，大小间隔只是一个值，但是对于X桶，您可以在“ 大小”输入中指定一个时间范围，例如time range 1h。这会使像元在X轴上宽1h。

Grafana 仪表测量(Gauge)图

仪表测量(Gauge)图介绍

Gauge 和Bar Gauge 均是 Grafana 的原生插件，使用简单。Grafana 有几个版是将 Gauge 放在了 Singlestat 中。但 Singlestat 只支持返回单个序列/表的查询，而 Gauge 是可以支持同时有多个查询（返回多个值）的，并显示多个仪表测量(Gauge)图。

使用 Gauge 实现仪表测量效果图，展示如下:

注意：还可以 Value mappings 把数字映射成文字。

值选项 Value options

使用以下选项来优化您的可视化显示值的方式：

显示show

选择 Grafana 显示数据的方式。

计算Calculate

显示基于所有行的计算值。

• 计算Calculation -选择 Grafana 将使用的缩减函数将许多字段缩减为单个值。有关可用计算的列表。
• 字段Fields -选择面板中显示的字段。

所有值All values

为每一行显示一个单独的统计数据。如果选择此选项，则还可以限制要显示的行数。

• 限制Limit -要显示的最大行数。默认值为 5,000。
• 字段Fields -选择面板中显示的字段。

测量Gauge

调整仪表的显示方式。

• 显示阈值标签Show threshold labels -控制是否显示阈值。
• 显示阈值标记Show threshold markers -控制阈值带是否显示在内仪表值带之外。

字体大小Text size

调整仪表文本的大小。

• 标题Title -输入仪表标题大小的数值。
• 值Value -输入仪表值大小的数值。

更多关于企业级监控平台系列的学习文章，请参阅：构建企业级监控平台，本系列持续更新中。

Gauge 具体设置方法

General 一般设置

Query 查询设置

Visualization 可视化

• Show可选项包括：All Values和Calculation
• All Values表示在选定的时间范围内显示所有的采样值；
• Calculation需要根据下方的Calc（Last、First、Min、Max等）中的具体选项来展示一个单一的数据；
• Add value mapping：添加值或者值范围对应的文字；

Gauge 支持多查询或多个值

更多关于企业级监控平台系列的学习文章，请参阅：构建企业级监控平台，本系列持续更新中。

参考链接：https://blog.csdn.net/qq_31555951/ article/details/115397209 https://blog.csdn.net/qq_31555951/article/ details/115467872