菜单
文档breadcrumb arrow 插件breadcrumb arrow Infinity 数据源breadcrumb arrow 参考breadcrumb arrow 显示选项breadcrumb arrow 节点图
开源

以节点图格式可视化数据

您可以使用 Infinity 数据源的 CSV、JSON 或 XML 功能生成节点图面板数据。

image

从 v0.8.0 版本开始，我们原生支持节点图。在 v0.8.0 版本之前，您可以使用“表格”格式创建选项有限的节点图。

无论版本如何，您都需要两个查询来形成节点图可视化。

  1. 第一个查询列出节点。必须包含强制性的 id 和 title 字段。这也可以包含额外的 arc__* 字段来指定节点的弧值。
  2. 第二个查询列出边（关系）。必须包含三个强制性字段，即 id、source 和 target

在此处阅读更多关于节点图数据结构的信息 此处

节点图格式

从 v0.8.0 版本开始，Infinity 插件对节点图提供了专门支持。您需要为每个查询创建两种不同格式的数据：nodes 和 edges。

节点

节点查询应包含以下字段。

  • id*
  • title
  • subTitle
  • arc__*
  • detail__*

如果您有任何 arc__* 字段，对应的值（数字）将用作节点的弧值。注意：行项的总值应总和为 1。如果您需要为 arc__* 字段指定颜色，请添加一个名为 arc__*_color 的新字段。

边

边查询应包含以下字段。

  • id*
  • source*
  • target*
  • detail__*

工作方式与 节点 相同。但不支持 arc__* 字段。

示例

以下是节点查询的示例

image

以下是边查询的示例

image

对应的节点图如下所示

image

对应的 CSV 数据如下所示

节点

csv 
id,title,sub-title,cpu,memory,c_disk_size,d,c_disk_size color,d color,detail__hello
A,Server A,Application Server,12,10,0.1,0.9,blue,red,world
B,Server B,DB Server,90,87,0.1,0.9,blue,red,hello
C,Server C,Application Server,20,23,0.20,0.80,blue,red,hello
D,Server D,Middleware Server,47,98,0.90,0.10,blue,red,world

边

csv 
id,source,target,mainStat,secondaryStat,detail__one
1,A,B,30,mb/s,abc
2,A,C,20,mb/s,def
3,B,D,24.2,mb/s,ghi

部分 CSV 字段与节点图格式不匹配。因此我们使用列别名来匹配准确的字段。此外，对于 CSV 格式，需要明确设置数字格式。否则，它们将被渲染为字符串。

最后，面板 JSON 如下所示

json 
{
  "id": 23763571993,
  "gridPos": {
    "h": 19,
    "w": 24,
    "x": 0,
    "y": 0
  },
  "type": "nodeGraph",
  "title": "Panel Title",
  "datasource": "Infinity",
  "pluginVersion": "8.2.0",
  "targets": [
    {
      "columns": [
        {
          "selector": "id",
          "text": "",
          "type": "string"
        },
        {
          "selector": "title",
          "text": "",
          "type": "string"
        },
        {
          "selector": "sub-title",
          "text": "subTitle",
          "type": "string"
        },
        {
          "selector": "cpu",
          "text": "mainStat",
          "type": "number"
        },
        {
          "selector": "memory",
          "text": "secondaryStat",
          "type": "number"
        },
        {
          "selector": "c_disk_size",
          "text": "arc__cpu",
          "type": "number"
        },
        {
          "selector": "d",
          "text": "arc__memory",
          "type": "number"
        },
        {
          "selector": "c_disk_size color",
          "text": "arc__cpu_color",
          "type": "string"
        },
        {
          "selector": "d color",
          "text": "arc__memory_color",
          "type": "string"
        },
        {
          "selector": "detail__hello",
          "text": "",
          "type": "string"
        }
      ],
      "data": "id,title,sub-title,cpu,memory,c_disk_size,d,c_disk_size color,d color,detail__hello\nA,Server A,Application Server,12,10,0.1,0.9,blue,red,world\nB,Server B,DB Server,90,87,0.1,0.9,blue,red,hello\nC,Server C,Application Server,20,23,0.20,0.80,blue,red,hello\nD,Server D,Middleware Server,47,98,0.90,0.10,blue,red,world",
      "filters": [],
      "format": "node-graph-nodes",
      "global_query_id": "",
      "refId": "A",
      "root_selector": "",
      "source": "inline",
      "type": "csv",
      "url": "",
      "url_options": {
        "data": "",
        "method": "GET"
      }
    },
    {
      "columns": [],
      "data": "id,source,target,mainStat,secondaryStat,detail__one\n1,A,B,30,mb/s,abc\n2,A,C,20,mb/s,def\n3,B,D,24.2,mb/s,ghi",
      "filters": [],
      "format": "node-graph-edges",
      "global_query_id": "",
      "hide": false,
      "refId": "B",
      "root_selector": "",
      "source": "inline",
      "type": "csv",
      "url": "",
      "url_options": {
        "data": "",
        "method": "GET"
      }
    }
  ]
}