Grafana 气泡图面板

概述

此面板旨在以气泡图的形式集中显示任何组件。根据标签值将圆圈分组到簇中，每个圆圈的大小和颜色代表时间序列数据的聚合值。

此插件使用基于 D3 的库来创建气泡图。它支持自动缩放，根据面板大小调整其大小。如果标签过长，则将禁用标签，只显示工具提示。

要求

该插件与 Grafana 10 及以上版本兼容。

屏幕截图

分组颜色方案	渐变颜色方案	独特颜色方案

渐变颜色方案	阈值颜色方案	渐变颜色方案

分组

此面板提供了两种分组圆圈的方式：“名称”和“标签”。当选择“名称”选项时，使用分组分隔符（默认：逗号）分割名称，并基于数据命名约定建立层次分组。在数据源查询中，使用具有不同标签名称的别名（通过可配置的分组分隔符分隔）以确定层次顺序。此动态功能允许您通过调整别名中标签名称的顺序来控制图表上圆圈的组织。例如，如果您的数据涉及数据中心和主机，并且您的别名结构为 $tag_dc,$tag_host，则图表将自动将所有主机圆圈分组在数据中心圆圈下。

另外，当选择“标签”选项时，使用下拉菜单选择标签并自定义分组顺序。这种灵活性在处理未正确定义名称或别名的系列时特别有用，提供了对图表上圆圈组织的更好控制。

要处理非时间序列格式化的数据，首先，使用 Grafana 的“按值分区”转换将其转换为多序列格式。在图表选项中，选择“按”选项为“标签”并选择适当的标签；它将正确解析数据。

选项

气泡图设置

###

• 标签 - 选择要在气泡图圆圈中显示的标签。
• 计算 - 用于聚合数据的还原函数。
• 单位 - 要显示的单位。
• 小数位数 - 要显示的小数位数。
• 分组分隔符 - 别名中用于分组标签值分隔符。

颜色方案

• 多个颜色方案。
  • 分组 - 在分组方案中，圆圈的颜色根据其分组层次结构来设置。
    • 颜色 - 分组层次结构中颜色范围的起始和结束。
  • 阈值 - 在阈值方案中，圆圈的颜色基于阈值值。
    • 阈值 - 阈值值。
    • 颜色 - 根据不同的阈值值应用颜色。
  • 渐变 - 在渐变方案中，圆圈的颜色基于组件值。
    • 阈值 - 阈值值。
    • 颜色 - 渐变尺度颜色范围的起始和结束。
  • 唯一 - 在唯一方案中，对单个圆圈应用不同的颜色。

兼容性

测试以下数据库

• InfluxDB
• OpenTSDB
• Bosun
• MySQL
  • 对于MySQL，在SQL表达式中使用CONCAT函数来实现多个分组层次结构。例如SQL表达式

  SELECT
  UNIX_TIMESTAMP(date) as time_sec,
  amt as value,
  CONCAT(server, ',', org) as metric
  FROM trade
  WHERE $__timeFilter(date)
  ORDER BY date ASC
  

预计这种方法也适用于其他数据库。

构建

此插件依赖于插件工具。典型的构建顺序如下

npm install
npm run build

对于开发，您可以运行

npm run dev

Docker支持

为了方便开发和测试，您可以使用包含的docker-compose.yml文件执行以下命令

docker-compose up

然后浏览到https://127.0.0.1:3000

升级影响

D3 Pack布局对称性更改

在D3的最新版本中，pack布局对称性已更新以容纳更多的圆圈。从本插件的Angular版本（v1.。）迁移的用户可能会注意到其布局有差异。以前，D3以螺旋形式组织圆圈，但现在它更密集地打包圆圈，从而增强了整体排列。