Grafana 图像面板

通过连接 URL、指标和后缀来显示图像。
结果将是：baseURL + 图标字段 + 后缀。

注意

• 版本 4.0.0 至少需要 Grafana 11.0.0
• 版本 3.0.0 至少需要 Grafana 10.0.3
• 版本 2.8.0 至少需要 Grafana 9.0.0
• 版本 2.6.0 至少需要 Grafana 8.5.0
• 如果新选项没有显示或插件看起来是旧版本，请卸载、重新安装，然后重启 grafana（或者如果使用 docker，请使用 GF_INSTALL_PLUGINS 环境变量中的最新插件版本运行新容器）
• 共享工具提示似乎不适用于最新的 grafana 版本
• 如果在 elapsed 模式和实际日期之间存在工具提示差异，如果您使用的是 MySQL 数据库，请阅读 此问题，因为它可能解决问题。

配置

如果查询选择多个字段，请使用外部连接转换。

URL

用于构建图像 URL 的选项

• 基本 URL（可选）：用于获取图像的 URL 的开头。 如果 icon field 已经包含基本 URL，则可以留空。 此选项支持变量。
• 图标字段 : 包含图像名称的字段。特殊值 First non time field 将使用它找到的第一个非时间字段。这是默认值。
• 后缀 (可选) : 添加在末尾的字符串。此选项支持变量。
• 备用 URL (可选) : 在加载“指标”图像时发生错误时显示的图像。

图像选项

允许选择图像显示方式的选项

• 自动适应 : 计算图像的宽度和高度，以便序列适应整个面板。启用此选项将禁用 Image width 和 Image height。
• 图像宽度 : 图像的宽度。此选项支持变量（请注意，它需要是数字）
• 图像高度 : 图像的高度。此选项支持变量（请注意，它需要是数字）
• 单张填充 : 如果查询只有一个结果，则允许填充面板而不是使用上面的宽度和高度
• Alt 字段 : 用作 alt 的字段。特殊值 Use icon field 将使用与 Icon field 相同的字段。这是默认值。如果加载图像时出现问题且未设置备用图像或备用图像本身有问题，则将使用 Alt field。

共享十字线选项

这些选项允许在鼠标悬停在图像上时设置背景和边框。如果仪表板中启用了 shared crosshair 或 shared tooltip，它也用于突出显示图像。

• 背景高亮颜色 : 用作共享十字线背景图像的颜色（默认为白色，带透明度）
• 边框高亮颜色 : 用于共享十字线的边框颜色。

注释

• 您必须在插件配置中启用工具提示，shared tooltip 才能实际显示工具提示
• shared tooltip 在幻灯片模式下不起作用（尽管 shared crosshair 可以工作），这意味着当悬停在另一个面板上时，工具提示不会显示
• 它与时间相关联，并且适用于 timeseries 和 candlestick 面板。

幻灯片选项

幻灯片的选项

• 启用幻灯片 : 启用幻灯片。
• 持续时间 : 配置图像显示的时长（以毫秒为单位）。不能为 0。
• 过渡效果 : 要使用的过渡动画
• 过渡持续时间 : 过渡将持续多长时间（以毫秒为单位）。不能为 0。
• 悬停时暂停 : 启用后，如果鼠标悬停在图像上，幻灯片将暂停。
• 无限循环 : 启用后，幻灯片在完成后从头开始继续播放

图像工具提示选项

添加和自定义工具提示的选项

• 包含工具提示 : 当鼠标悬停在图像上时将显示工具提示
• 包含字段 : 在工具提示文本中包含字段值
• 工具提示字段 : 选择要在工具提示中显示的字段值。特殊值 Use icon field 将使用与 Icon field 相同的字段。这是默认值。
• 包含日期 : 工具提示将包含日期和时间
• 显示为已用时间 : 日期将显示为已用时间（即 4 小时前）

图像链接选项

它允许在新标签页中打开链接。它的工作方式类似于图像 URL：它连接 3 个元素（基本 URL、指标值和后缀）。

• 点击打开 : 启用链接支持。
• 在新标签页中打开 : 允许在新标签页中打开链接。默认启用。
• 基本 URL（可选）：用于获取图像的 URL 的开头。 如果 icon field 已经包含基本 URL，则可以留空。 此选项支持变量。
• 链接字段 : 包含值的字段。特殊值 Don't use a field 允许不使用任何字段，所有图像的结果将是相同的链接。这是默认值。
• 后缀 (可选) : 添加在末尾的字符串。此选项支持变量。

覆盖层选项

允许在每个图像的角上添加彩色方块作为覆盖层。颜色从值绑定。默认情况下，颜色为浅透明灰色。
绑定行为如下

• 如果绑定中声明的所有值都是数字，并且从数据猜测的值类型也是数字，则它的行为类似于 Grafana 的阈值。
• 否则，它只是一个简单的映射。

注意：当离开输入字段时，值将被排序，并且空的输入将被删除，因此请注意，在选择颜色绑定时不会重新排序。

绑定的选项

• 覆盖层字段 : 选择用于绑定的数据字段（时间字段将被删除）。如果选择 No overlay，则不会显示覆盖层。
• 位置 : 选择覆盖层的位置。
• 宽度 : 允许选择覆盖层的宽度（以像素或图像大小的百分比为单位）。
• 高度 : 允许选择覆盖层的高度（以像素或图像大小的百分比为单位）。
• 绑定 : 允许为每个值选择颜色。也允许为未映射的值选择颜色。

注意：当离开输入字段时，值将被排序，并且空的输入将被删除，因此请注意，在选择颜色绑定时不会重新排序。

下划线选项

添加字段值作为下划线。如果文本比图像宽，则将被截断。

• 下划线字段 : 用作下划线的字段。如果选择 No underline，则不会显示下划线。
• 文本大小 : 文本的大小。
• 文本对齐 : 水平下划线对齐方式。默认为 left。
• 绑定字段 : 允许使用字段来绑定文本颜色。
• 绑定 : 如果 Underline 的 Binding field 设置为字段，则将显示此配置。它将允许将值映射到颜色。

注意：当离开输入字段时，值将被排序，并且空的输入将被删除，因此请注意，在选择颜色绑定时不会重新排序。

屏幕截图

多个结果

“单张填充”

禁用“单张填充”的一个结果

覆盖层

下划线

共享十字线支持

共享工具提示支持

安装

按照 grafana 插件网页 上的说明进行操作

许可证

• 颜色绑定组件是 Grafana 的 ThresholdsEditor 的修改版本，因此采用 Apache 2.0 许可证。

鸣谢

插件的徽标在 此处 找到，并根据 MIT 许可证获得许可。
幻灯片 根据 Apache 2.0 许可证获得许可。

GitHub 的工作流程来自 grafana，并根据 Apache 2.0 许可证获得许可

插件开发：资源

• 文档
• “Storybook”
• 发布工作流程