阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表

作者: 站长软件 日期: 2020-11-04 10:40:46 人气: - 标签: 阿里 基于 数据 驱动

科技速递:

介绍

之前的一些文章中已经介绍过很多个阿里巴巴的开源产品,其中不乏大多是都是优秀的,使用的人也很多,本文亦然!butterfly是阿里开源的基于JS的数据驱动的节点式编排组件库,可以方便快捷的构建可视化的流程图表,不可谓不良心!



阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表



开源地址

Github:

https://github.com/alibaba/butterfly

示例地址(网页有点偏):

https://noonnightstorm.github.io

相关特性

  • 开箱即用的参考DEMO,可在线调试
  • 全方位管理画布,开发者只需要更专注定制化的需求
  • 利用dom来定制元素;灵活性,可塑性,拓展性优秀

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


这三点就够了,特别是用过很多阿里的东西都提供在线调试,或者在线工具,学习起来非常的方便!

安装

因为就是一个简单的JS库,安装起来非常方便

npm install butterfly-dag

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


简单示例

官网提供了几个不错的示例,这次咱们带上动图预览

  • 力导向图

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 工艺流程图

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • LOT

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 工业制图

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 流程图

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


快速开始

  • 生成画布
const Canvas = require('butterfly-dag').Canvas;
let canvas = new Canvas({
root: dom, //canvas的根节点(必传)
zoomable: true, //可缩放(可传)
moveable: true, //可平移(可传)
draggable: true, //节点可拖动(可传)
});
canvas.draw({
groups:[], //分组信息
nodes:[], //节点信息
edges:[]// 连线信息
})

  • 定制元素(节点组,节点,线,锚点)
// 定制节点
const Node = require('butterfly-dag').Node;
class ANode extend Node{
draw(){
// 这里定制您需要的节点并返回一个dom
let div = document.createElement("div");
div.innerHTML('helloworld');
return div
}
}
// 定制节点组
const Group = require('butterfly-dag').Group;
class AGroup extend Group{
draw(){
// 这里定制您需要的节点组并返回一个dom
let container = document.createElement("div");
container.className = 'container';
let title = document.createElement('p');
title.innerHTML = 'group name'
container.appendChild(title);
return container;
}
}

详细的也可以查看Github的文档,对于画布(Canvas)、节点组(Group)、节点(Node)、线(Edge)、锚点(endpoint)都有详细的配置介绍文档

  • 画布

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 节点组

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 节点

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 线

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


  • 锚点

阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


处以上使用方式以及配置选项之外,还提供了丰富的方法供开发者调用,感兴趣的可以直接参照Github上的文档,这里就不一一展示了

总结

阿里开源的产品很多,这也只是其中一个,在众多开源产品中是比较小众的一个了,但是也能够帮助我们解决一些比较特殊的业务需求了,如果你有类似的需求不妨试试看!


阿里基于数据驱动的JS组件库——方便快捷定制可视化流程图表


网友评论:

酒淡无香 :阿里的开源项目有维护不及时的风险[捂脸]

时习之er :不错好东西

天宝健康 :【】

用户2055731153288 :牛

数据人生 :不错的说

风吹麦浪267 :i

HeyJude遗忘的天赋 :转发了

老皇叔 :转发了

YL0523 :转发了

姜惠忠2 :转发了

coderyph :转发了

TIGERCHENG :转发了

南山到北海 :转发了

壹分356 :转发了

song55768261 :转发了

循其本价格鉴定 :转发了

blanks299 :转发了

老施聊系统 :转发了

C橙子味 :转发了

eleven1920 :转发了

文章来源:https://www.toutiao.com/group/6712776040017560075/

Copyright © 2009-2020 水淼软件技术 Inc. 保留所有权利。粤ICP备16013086号 霏凡软件站 转载文章如有侵权请联系删除