Grafana 图像面板

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

注意

• 版本 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 字段 已经包含基本 URL，可以留空。此选项支持变量。
• 图标字段：包含图像名称的字段。特殊值 第一个非时间字段 将使用它找到的第一个非时间字段。这是默认值。
• 后缀（可选）：要在末尾添加的字符串。此选项支持变量。
• 备用 URL（可选）：如果加载“指标”图像时出现错误，要显示的图像。

图像选项

允许选择如何显示图像的选项

• 自动适应：计算图像的宽度和高度，以使系列适合整个面板。启用此选项将禁用 图像宽度 和 图像高度。
• 图像宽度：图像的宽度。此选项支持变量（注意它需要是一个数字）
• 图像高度：图像的高度。此选项支持变量（注意它需要是一个数字）
• 单一填充：如果查询有一个唯一的结果，允许填充面板，而不是使用上面的宽度和高度
• Alt 字段：用作 alt 的字段。特殊值 使用图标字段 将使用与 图标字段 相同的字段。这是默认值。如果加载图像时出现问题并且未设置备用图像或备用图像本身也出现了问题，将使用 Alt 字段。

共享十字线选项

这些选项允许在鼠标悬停在图像上时设置背景和边框。如果在仪表盘中启用了 共享十字线 或 共享工具提示，它也会用于突出显示图像。

• 背景突出显示颜色：用作共享十字线背景图像的颜色（默认情况下为带有透明度的白色）
• 边框突出显示颜色：用于共享十字线的边框颜色。

注意

• 您必须在插件配置中启用工具提示，才能使共享工具提示实际显示工具提示。
• 共享工具提示在幻灯片模式下不起作用（尽管共享十字准线起作用了），这意味着在悬停在另一个面板上时工具提示不会显示。
• 它与时间相关，并与时间序列和烛台面板配合使用。

幻灯片选项

幻灯片选项

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

图像工具提示选项

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

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

图像链接选项

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

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

覆盖选项

允许在每个图像的角落添加彩色方块作为覆盖。颜色从值绑定。默认情况下，颜色为浅透明灰色。
绑定以这种方式运作

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

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

绑定选项

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

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

下划线选项

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

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

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

截图

多个结果

“单一填充”

一个结果，禁用“单一填充”

覆盖

下划线

支持共享十字准线

支持共享工具提示

安装

按照Grafana 插件网页上的说明操作。

许可证

• 颜色绑定组件是 Grafana 的 ThresholdsEditor 的修改，因此在 Apache 2.0 许可证下。

鸣谢

插件的徽标是在这里找到的，并根据 MIT 许可证。
幻灯片在 Apache 2.0 许可证下。

GitHub 的工作流程来自Grafana，并在 Apache 2.0 许可证下。

插件开发：资源

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