Angualr中初步使用gojs图形化组件制作树状图(父子关系图)

需求场景:
因为需要根据接口之间的分发关系制作数据流向关系图,但是eCharts中的关系图组件实例不怎么多,数据流向表达不明显;使用树状图的话,eCharts提供的图形组件也有点不太适合,因此在同事建议下使用goJs制作树状图,效果如下。
在这里插入图片描述过程分布:

  1. 导入package
  2. 初始化模板(初始化的过程好像必须放在ngOnInit()中,如果放在http请求的回调函数中,是不行的.)
  3. 加载数据;

作为模型化组件,最重要的内容就是数据的结构,树形图所接受的基本数据结构如下。

[{​
	key: "2"//必须属性,自身唯一标识
	name: "parent"//必须属性
  ​},
	{
	key: "3"​​,
	parent:"2",//必须属性,父节点
	name: "son",
	
	color: "#52b4e0",//以下都是自定义属性,为的是之后与节点的shape属性绑定
	fig: "RoundedRectangle"
	fontColor: "black"
	height: 32
	servNo: "SCP-ER
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值