文档首页 > > 用户指南> 组件指南> 关系网络> 关系网络图

关系网络图

分享
更新时间: 2019/12/06 GMT+08:00

本章节介绍关系网络图组件各配置项的含义,帮助您更好了解如何配置关系网络组件。

样式

  • 尺寸位置
    • 图表尺寸:设置图表的宽和高。单位为px。
    • 图表位置:设置图表在画布中的位置。单位为px。
    图1 尺寸位置-关系网络图
  • 文字标签
    • 显示/隐藏文字标签:单击“文本标签”右侧的勾选框,表示显示文字标签,表示隐藏文字标签。
    • 字体:设置标签的字体。
    • 字号:设置标签的字号。
    • 颜色:设置标签的字体颜色。
    • 字体粗细:设置标签的字体粗细。
    • 位置:设置标签的位置。
    图2 文字标签-关系网络图
  • 连接线
    • 颜色:设置连接线的颜色
    • 粗细:设置连接线的粗细程度。
    • 长度:设置连接线的长度。
    • 类型:设置连接线的类型,可以设置为实线、虚线、点划线。
    图3 连接线-关系网络图
  • 图例
    • 显示/隐藏图例:单击“图例”右侧的勾选框,表示显示图例,表示隐藏图例。
    • 文本:设置图例的字号、字体颜色、字体粗细。
    • 布局:设置图例的位置、与图层间的边距、图例的间隔。
    图4 图例-关系网络图

数据

上图中的示例数据如下:

{
  "nodes": [
    {
      "name": "n1",
      "imgPath": "",
      "category": 0
    },
    {
      "name": "n2",
      "imgPath": "",
      "category": 1
    },
    {
      "name": "n3",
      "imgPath": "",
      "category": 1
    },
    {
      "name": "n4",
      "imgPath": "",
      "category": 1
    },
    {
      "name": "n5",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n6",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n7",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n8",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n9",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n10",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n11",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n12",
      "imgPath": "",
      "category": 2
    },
    {
      "name": "n13",
      "imgPath": "",
      "category": 2
    }
  ],
  "links": [
    {
      "source": "n1",
      "target": "n2"
    },
    {
      "source": "n1",
      "target": "n3"
    },
    {
      "source": "n1",
      "target": "n4"
    },
    {
      "source": "n2",
      "target": "n5"
    },
    {
      "source": "n2",
      "target": "n6"
    },
    {
      "source": "n2",
      "target": "n7"
    },
    {
      "source": "n3",
      "target": "n8"
    },
    {
      "source": "n3",
      "target": "n9"
    },
    {
      "source": "n3",
      "target": "n10"
    },
    {
      "source": "n4",
      "target": "n11"
    },
    {
      "source": "n4",
      "target": "n12"
    },
    {
      "source": "n4",
      "target": "n13"
    }
  ]
}
  • nodes:设置节点,包含以下三个字段。
    • name:节点的标签名。
    • imgPath:图片的链接地址。如果节点需要使用图片,可设置此参数值为图片的链接地址。如果此参数的值为空,节点显示为默认的圆形。
    • category:节点的数据系列字段,数据将根据category字段的值进行分组。
      • 新增数据系列:单击s字段后的,增加数据系列
      • 配置数据系列: 单击数据系列前方的>,在展开的面板中配置该系列的指定样式(系列名,半径,填充颜色,描边颜色,描边粗细)。
  • links:设置连接线,包含以下两个字段。
    • source:设置连接线的源节点,取值为源节点的name值。
    • target:设置连接线的目标节点,取值为目标节点的name值。

交互

此组件没有交互事件。

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区