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 中，打包布局对称性已更新以适应更多圆圈。从此插件的 Angular 版本 (v1..) 迁移的用户可能会注意到布局上的差异。以前，D3 以螺旋形式组织圆圈，但现在它更密集地打包圆圈，从而增强了整体排列。