交互式树形插件

欢迎使用 交互式树形插件，这是您在 Grafana 10.4+ 中创建交互式树状图的解决方案。

工作原理

交互式树形面板旨在轻松可视化分层数据。要有效使用它，需要映射以下字段

• 节点 ID：唯一标识每个节点。
• 父节点 ID：指定每个节点的父节点 ID。
• 节点标签：描述每个节点的名称或标签。

如果您有额外的字段，请不用担心；面板可以无缝处理它们。在面板设置中，您可以自定义与节点 ID、父节点 ID 和节点名称相对应的列名。

面板首先识别父节点 ID 字段为 NULL 的行；这些行被视为根节点。然后，通过将根节点的节点 ID 与其他节点的父节点 ID 进行匹配，递归地添加子节点。

面板选项

配置面板时，您可以使用多种自定义选项

树形选项

• 节点 ID 字段名：数据的每一行都对应一个节点。设置包含节点 ID 的字段。

• 节点标签字段名：设置用于渲染节点标签的字段。

• 节点父节点 ID 字段名：设置包含节点父节点 ID 的字段。

• 附加字段：要显示的额外字段名的逗号分隔列表。这将把树形结构转换为表格。

• 支持禁用节点：禁用节点将显示为灰色，既不可选也不可展开。

• 节点禁用字段名：设置指示节点是否禁用的字段。支持：boolean = true, string = true，两者都表示禁用节点。

• 展开级别：初始展开的级别数。在保存并应用后生效（刷新页面）。

• 显示子项计数：在标签后的括号中显示一级子节点的数量。

• 节点 ID 字段名：数据的每一行都对应一个节点。设置包含节点 ID 的字段。

• 节点标签字段名：设置用于渲染节点标签的字段。

• 节点父节点 ID 字段名：设置包含节点父节点 ID 的字段。

• 附加字段：要显示的额外字段名的逗号分隔列表。这将把树形结构转换为表格。

• 支持禁用节点：禁用节点将显示为灰色，既不可选也不可展开。

• 节点禁用字段名：设置指示节点是否禁用的字段。支持：boolean = true, string = true，两者都表示禁用节点。

• 展开级别：初始展开的级别数。在保存并应用后生效（刷新页面）。

• 显示子项计数：在标签后的括号中显示一级子节点的数量。

• 各级别中的顺序：升序、降序或源顺序。

搜索选项

• 显示搜索框：@@TODO
• 搜索框占位符文本：在搜索输入字段中显示的占位符文本。
• 图标筛选：启用一个开关按钮，可以筛选包含图标的节点及其父节点。
• 图标筛选标签：此开关按钮显示的标签。

折叠/展开和选择选项

• 折叠/展开模式：处理 Chevron 和 Label 点击的方式。设置为 no toggle 时，请确保展开级别足够高。
• 允许使用 Ctrl+点击 或 Shift+点击 进行多选：按住 Ctrl 键选择不同的节点，或按住 Shift 键选择可见范围。
• 点击模式：处理树形交互的方式。设置为 设置仪表盘变量 会将点击节点的 ID 存储到仪表盘变量中。设置为 数据链接 会在点击节点时打开一个 URL。设置为 两者 会将点击节点的 ID 存储到仪表盘变量中，并显示一个图标，点击该图标会打开一个 URL。
• 仪表盘变量名：存储点击节点 ID 的仪表盘变量名称。
• 数据链接 URL：点击节点时打开的 URL。使用 __data 变量访问节点数据。例如：${__data.fields.link:raw}${__data.fields.label:percentencode}。
• 在新标签页中打开：选中后，点击链接将在新标签页中打开，而不是当前页面跳转。

表格选项

• 显示网格线：选中后，网格线将可见。
• 显示列头：选中后，列头将可见。
• 紧凑模式：减少表格单元格周围的空间，使表格更紧凑。

值映射

• 值映射：使用一个或多个映射将值映射到文本和/或颜色。

图标映射

可以在节点前面显示一个图标，根据字段和条件确定。这允许根据不同的条件显示不同的图标。图标颜色可以使用不同的字段和/或其他条件设置，允许同一图标有不同的颜色。将使用第一个匹配项。

• 图标字段名：包含用于计算图标的数据的字段名。
• 值到图标映射：使用一个或多个映射将值映射到图标。
• 图标颜色字段名：包含用于计算图标颜色的数据字段名。
• 值到图标颜色映射：使用一个或多个映射将值映射到图标颜色。

父节点图标映射

第二个图标，称为父节点图标，可用于在父节点上显示不同的图标，主要在节点折叠时有用。仅当节点或其子节点之一已包含图标时，此图标才可见。

• 图标字段名：包含用于计算父节点图标的数据的字段名。
• 父节点图标映射条件：使用一个或多个映射将值映射到父节点图标。
• 父节点图标颜色字段名：包含用于计算父节点图标颜色的数据字段名。
• 父节点图标颜色映射条件：使用一个或多个映射将值映射到父节点图标颜色。
• 点击模式：点击父节点图标时执行的操作。展开 会展开节点，直到所有满足父节点图标映射条件的值都可见。选择 会选择所有满足父节点图标映射条件的已启用子节点。
• 点击提示：在搜索输入字段中显示的占位符文本。

使用交互式树形插件，您可以轻松创建交互式且信息丰富的树状图，以可视化您的分层数据。探索各种可能性，让您的数据栩栩如生！