文档 Grafana 文档 面板和可视化 可视化 Canvas

Canvas

Canvas 将 Grafana 的强大功能与自定义元素的灵活性相结合。它们是可扩展的可视化，允许你在非结构化的静态和动态布局中，在任何位置添加和排列元素。这使得你可以设计自定义可视化，并以标准 Grafana 可视化无法实现的方式叠加数据，所有这些都在 Grafana UI 内完成。

如果你使用过流行的 UI 和网页设计工具，那么设计 Canvas 会感觉非常熟悉。有了所有这些动态元素，Canvas 可以显示的内容几乎没有限制。

配置 Canvas 可视化

以下视频展示了如何创建和配置 Canvas 可视化

支持的数据格式

Canvas 可视化是独一无二的，它没有任何特定的数据要求。你甚至可以在不提供任何数据的情况下开始添加和配置可视化元素。但是，你计划使用的数据应该可以通过支持的 Grafana 数据源访问，并以确保与自定义元素顺利集成的方式进行结构化。

如果你的 Canvas 将进行实时更新，你的数据应该支持按照期望的时间间隔进行刷新，同时不降低用户体验。

你可以通过 Canvas 可视化中提供的选项（如文本、颜色和背景图案图像等）将元素和连接绑定到数据。

元素

元素是 Canvas 的基本组成部分，它们帮助你使用不同的形状和选项来可视化数据。你可以在 Canvas 上旋转和移动元素。移动元素时，对齐吸附线和辅助线有助于你创建更精确的布局。

在 Canvas 选项的图层部分添加元素。

元素类型

当你选择已添加到 Canvas 的元素时，你可以访问其配置选项，这些选项取决于元素类型。

以下部分描述了可用的不同元素。

基本形状

基本形状元素可以显示文本（固定文本和字段数据），其背景颜色可以根据数据阈值更改。你可以向 Canvas 添加以下基本形状

• Cloud
• Ellipse
• Parallelogram
• Rectangle
• Triangle

Metric value

指标值元素允许你选择要在 Canvas 上显示的数据。此元素具有独特的“编辑”模式，可以通过上下文菜单中的“编辑”选项或双击触发。在编辑模式下，你可以选择要显示的字段数据。

文本

文本元素允许你向 Canvas 添加文本。此元素还支持编辑模式，通过双击或上下文菜单中的编辑菜单选项触发。

Icon

图标元素允许你向 Canvas 添加支持的图标。图标的颜色可以根据阈值或值映射进行设置。

添加自定义图标

你可以通过引用 SVG 文件添加自定义图标。要添加自定义图标，请按照以下步骤操作

1. 在图标 > SVG 路径下，如果尚未选择，请选择固定作为文件源。

2. 单击下方字段中的选择值。

3. 在打开的对话框中，单击URL选项卡。

4. 在URL选项卡下方的字段中输入 URL。

5. 单击选择。

6. （可选）按照添加自定义图片的步骤，使用背景（图标）选项为图标添加背景图片。

如果你没有 SVG 文件，可以使用矩形元素代替图标，并将其背景图片设置为图片文件类型。要为其他元素类型添加自定义图片，请按照添加自定义图片的步骤操作。

Server

服务器元素让你轻松表示单个服务器、服务器堆栈、数据库或终端。服务器元素支持状态颜色、指示灯颜色和指示灯闪烁速率，这些都可以通过固定值或字段值进行配置。

Button

按钮元素让你向 Canvas 添加基本按钮。按钮元素支持触发基本的、无需身份验证的 API 调用。API 设置可以在按钮元素编辑器中找到。你还可以在 API 编辑器中传递模板变量。

使用 Grafana Play 试一试

通过 Grafana Play，你可以探索并了解其工作原理，通过实际示例加速开发。此功能可在Canvas 可视化：按钮上看到。

试用

按钮 API 选项

以下选项允许你配置基本的、无需身份验证的 API 调用

为元素添加自定义图片

你可以通过引用图片 URL 为除按钮以外的所有元素添加自定义背景图片。图片必须托管在允许你的 Grafana 实例发出请求的 URL 上。

要上传自定义图片，请按照以下步骤操作

1. 在背景（<元素类型>）下，如果尚未选择，请选择固定作为图片源。

2. 单击下方字段中的选择值。

3. 在打开的对话框中，单击URL选项卡。

4. 在URL选项卡下方的字段中输入 URL。

5. 单击选择。

连接

在构建 Canvas 时，你可以将元素连接在一起以创建更复杂的可视化。你还可以创建与 Canvas 背景的连接。

要创建连接，请按照以下步骤操作

1. 在面板编辑窗格中，展开Canvas选项部分。

2. 开启内联编辑开关。

3. 将光标悬停在你想要连接的元素上，以显示连接锚点

4. 将光标从该元素上的连接锚点拖动到另一个元素上的连接锚点。

要移除连接，请点击连接，然后按下 Delete 或 Backspace 键。

连接调整

你可以调整连接，为它们添加角度，以适应你正在工作的 Canvas。移动连接的元素时，连接会调整大小以适应空间。

• 要调整连接，请点击它以显示中点控制，并根据需要移动它们。
• 要使连接再次成为直线，请将中点移回，直到中点控制消失。

如果你移动连接使其接近直角或直线，连接会吸附到该角度或直线上。

连接样式

你可以根据固定值或字段值设置连接的大小、颜色、方向和样式。为此，请进入面板编辑模式，选择连接，然后在面板编辑器中修改连接属性。有关连接样式的更多信息，请参阅选定连接选项。

Canvas 编辑

你可以在仪表盘的上下文（即仪表盘模式）中更改 Canvas 可视化。以下部分描述了仪表盘模式下可用的编辑选项。

内联编辑器

你可以在仪表盘模式下内联编辑你的 Canvas。内联编辑器菜单显示与你选择的 Canvas 部分相关的选项。你还可以移动编辑器窗口。

上下文菜单

上下文菜单让你快速高效地执行常见任务。支持的功能包括打开和关闭内联编辑器、复制元素、删除元素等。

右键单击面板或给定的 Canvas 元素会触发上下文菜单。右键单击面板时，你可以设置背景图片并轻松向 Canvas 添加元素。

右键单击元素时，你可以编辑、删除、复制和修改元素的图层位置。

配置选项

以下部分描述了此可视化在面板编辑器窗格中可用的配置选项。这些选项尽可能按照它们在 Grafana 中的显示顺序排列。

面板选项

在面板编辑器窗格的面板选项部分，设置面板标题和描述以及面板链接等基本选项。要了解更多信息，请参阅配置面板选项。

Canvas 选项

内联编辑

内联编辑开关允许你锁定或解锁 Canvas。关闭时，Canvas 会被“锁定”，元素固定在原位，防止意外修改。

实验性元素类型

开启开关以在可用选项中包含实验性元素类型。

平移和缩放

你可以在 Canvas 中启用平移和缩放。这使得你能够创建和导航更复杂的设计。

使用以下指针和键盘操作

• 放大 - 向上滚动
• 缩小 - 向下滚动
• 平移 - 鼠标中键/滚轮 + 拖动 或 Control + 右键 + 拖动
• 重置 - 双击

无限平移

在启用平移和缩放时，你可以在 Canvas 中启用无限平移。这使得你可以平移和缩放 Canvas 并发现更大的设计。

图层选项

图层选项允许你向 Canvas 添加元素并控制其外观

• 元素
• 背景
• 边框

元素（图层）

使用添加项目按钮打开元素类型下拉列表。元素按照你添加到 Canvas 的相反顺序排列

默认情况下，元素带有编号名称，如“Element 1”，这些编号对应于添加元素的顺序，但你可以更改默认名称。

你还可以对元素执行以下操作

• 通过点击并按住元素行，在元素列表中上下移动来更改元素的顺序。
• 通过点击元素行上的图标来复制或移除元素。
• 通过点击元素行访问元素编辑选项。这将显示选定元素选项部分。点击清除选择以取消元素焦点并停止显示该选项部分。

重命名元素

要更新元素名称，请按照以下步骤操作

1. 将光标悬停在元素名称上，以便显示编辑图层名称（铅笔）图标。
2. 点击编辑图层名称图标。
3. 输入新名称。
4. 点击名称字段外部。

背景（Canvas）

使用以下选项控制 Canvas 的背景

边框（Canvas）

使用以下选项控制 Canvas 的边框

选定元素选项

以下选项允许你控制所选元素的显示。要访问元素以便编辑，请展开图层部分并选择所需元素。

元素类型

你可以在下拉列表中进行新的选择来更改元素类型

元素

此部分的名称基于元素类型。使用以下选项控制元素上文本的显示

图标没有文本，因此它们有不同的选项

布局

使用以下选项控制元素在 Canvas 上的位置

背景（元素）

使用以下选项设置元素的背景

• 颜色 - 设置背景颜色。
• 图片 - 使用提供的背景图片之一，或添加你自己的自定义图片。

此选项不适用于按钮元素。

边框（元素）

使用以下选项设置元素的边框

• 宽度 - 设置边框宽度（像素）。
• 颜色 - 设置边框颜色。此选项仅在边框宽度大于零时显示。
• 圆角 - 为元素边框添加圆角并控制弯曲程度。

数据链接和操作

Canvas 支持所有元素的数据链接和操作。

如果为一个元素添加多个数据链接或操作，你可以控制它们在元素提示框中出现的顺序。为此，点击并拖动链接或操作到所需位置。

以下任务描述了如何配置数据链接和操作。

选定连接选项

你可以使用以下选项设置选定连接的样式

• 颜色 - 设置连接颜色。

• 大小 - 在值字段中输入数字来控制连接的大小。

• 圆角 - 输入一个值来表示程度，为连接添加弯曲。

• 箭头方向 - 控制箭头的外观。可选择：

  • 向前 - 箭头指向连接绘制的方向。
  • 向后 - 箭头指向连接绘制的反方向。
  • 双向 - 在连接的两端添加箭头。
  • 无 - 移除箭头。

• 线条样式 - 从以下线条样式中选择：实线、虚线和点线。

标准选项

面板编辑器窗格中的标准选项允许你更改字段数据在可视化中的显示方式。设置标准选项时，更改将应用于所有字段或系列。要更精细地控制字段显示，请参阅配置覆盖。

要了解更多信息，请参阅配置标准选项。

值映射

值映射是一种可以用来改变数据在可视化中显示方式的技术。

对于每个值映射，请设置以下选项

• 条件 - 选择映射到显示文本和（可选）颜色的内容
  • 值 - 特定值
  • 范围 - 数值范围
  • 正则表达式 - 正则表达式
  • 特殊值 - 特殊值，例如 Null、NaN（非数字）或布尔值，例如 true 和 false
• 显示文本
• 颜色（可选）
• 图标（仅 Canvas）

要了解更多信息，请参考配置值映射。

字段覆盖

覆盖功能允许您自定义特定字段或系列的可视化设置。添加覆盖规则时，它会针对特定的字段集，并允许您为此字段的显示方式定义多个选项。

请从以下覆盖选项中选择

要了解更多信息，请参考配置字段覆盖。

阈值

阈值是您为某个度量指标设置的值或限制，当达到或超出该值或限制时，会在可视化中反映出来。阈值是您可以根据查询结果有条件地设置可视化样式和颜色的一种方式。

为每个阈值设置以下选项

要了解更多信息，请参考配置阈值。