<dfn id="b6ani"></dfn>
    1. <th id="b6ani"><meter id="b6ani"><ins id="b6ani"></ins></meter></th>

      <sub id="b6ani"><meter id="b6ani"></meter></sub>

      <var id="b6ani"><ol id="b6ani"></ol></var><th id="b6ani"></th>

      <cite id="b6ani"><u id="b6ani"><p id="b6ani"></p></u></cite>

          1. 阿里基于数据驱动的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号 霏凡软件站 转载文章如有侵权请联系删除

            亚洲老汉色Av影院在线