Grafana 图像面板

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

注意

• 版本 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 的选项

• Base URL (可选)：获取图像的 URL 开头。如果 icon field 已包含 Base URL，则可以留空。此选项支持变量。
• Icon field：包含图像名称的字段。特殊值 First non time field 将使用找到的第一个非时间字段。这是默认值。
• Suffix (可选)：要添加在末尾的字符串。此选项支持变量。
• Fallback URL (可选)：加载“metric”图像时出错时显示的图像。

图像选项

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

• Auto fit：计算图像的宽度和高度，使系列适应整个面板。启用此选项将禁用 Image width 和 Image height。
• Image width：图像的宽度。此选项支持变量（注意必须是数字）
• Image height：图像的高度。此选项支持变量（注意必须是数字）
• Single fill：如果查询结果唯一，则允许填充面板而不是使用上面的宽度和高度
• Alt field：用作 alt 的字段。特殊值 Use icon field 将使用与 Icon field 相同的字段。这是默认值。如果在加载图像时出现问题且未设置 fallback 或 fallback 本身有问题，将使用 Alt field。

共享十字光标选项

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

• Background highlight color：用作共享十字光标背景图像的颜色（默认为白色透明）
• Border highlight color：用于共享十字光标的边框颜色。

注意

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

幻灯片选项

幻灯片选项

• Enable slideshow：启用幻灯片。
• Duration：配置图像显示时长（毫秒）。不能为 0。
• Transition：要使用的过渡动画
• Transition duration：过渡所需时间（毫秒）。不能为 0。
• Pause on hover：启用后，如果鼠标悬停在图像上，幻灯片将暂停。
• Infinite：启用后，幻灯片在结束后从头开始继续播放

图像工具提示选项

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

• Include tooltip：鼠标悬停在图像上时将显示工具提示
• Include field：在工具提示文本中包含字段值
• Tooltip field：选择要在工具提示中显示的字段值。特殊值 Use icon field 将使用与 Icon field 相同的字段。这是默认值。
• Include date：工具提示将包含日期和时间
• As elapsed：日期将显示为经过时间（例如 4 小时前）

图像链接选项

它允许在新标签页中打开链接。其工作原理与图像 URL 类似：它连接 3 个元素（Base URL、指标值和后缀）。

• Click to open：启用链接支持。
• Open in new tab：允许在新标签页中打开链接。默认为启用。
• Base URL (可选)：获取图像的 URL 开头。如果 icon field 已包含 Base URL，则可以留空。此选项支持变量。
• Link field：包含值的字段。特殊值 Don't use a field 允许不使用任何字段，结果将是所有图像使用相同的链接。这是默认值。
• Suffix (可选)：要添加在末尾的字符串。此选项支持变量。

叠加选项

允许在每个图像的角落添加彩色方块作为叠加。颜色根据值绑定。默认情况下，颜色是浅透明灰色。
绑定行为如下

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

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

绑定选项

• Overlay field：选择要用于绑定的数据字段（时间字段被移除）。如果选择了 No overlay，则不显示叠加。
• Position：选择叠加的位置。
• Width：允许选择叠加的宽度（像素或图像尺寸的百分比）。
• Height：允许选择叠加的高度（像素或图像尺寸的百分比）。
• Binding：允许为每个值选择颜色。也允许为未映射的值选择颜色。

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

下划线选项

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

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

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

截图

多个结果

“Single fill”

一个结果，“single fill”已禁用

叠加

下划线

支持共享十字光标

支持共享工具提示

安装

遵循 Grafana 插件网页上的说明

许可

• 颜色绑定组件是 Grafana 阈值编辑器的修改版本，因此采用 Apache 2.0 许可。

致谢

插件的标志图标来自此处，并采用 MIT 许可。
幻灯片采用 Apache 2.0 许可。

GitHub 的工作流程来自 grafana，并采用 Apache 2.0 许可

插件开发：资源

• 文档
• "Storybook"
• 发布工作流程