metricflow实现一个可拖拽的流程图图表效果代码-html代码-BFW代码库

metricflow实现一个可拖拽的流程图图表效果代码

代码语言：html

所属分类：图表

代码描述：metricflow实现一个可拖拽的流程图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/metricflow.min.js"></script>
    <script>
        window.onload = function () {

            let metricFlow = MetricFlow("graph")

            /*定义节点数据*/
            let node1Data= {
                "id":"primaryKey1",
                "title":{'name':"A系统日志"},
                "data":[
                   {'name':'描述：从A系统抽取日志'},
                   {'name':'抽取频率：一天一次'},
                   {'name':'平均耗时：10s'},
                   {'name':'状态：正常'}
                 ]
            };
            let node1 = metricFlow.createNode(node1Data,30,100);

            let node2Data= {
                "id":"primaryKey2",
                "title":{'name':"B系统日志",'background-color':'red'},
                'border-color':'red',
                "data":[
                    {'name':'描述：从B系统抽取日志'},
                    {'name':'抽取频率：一天一次'},
                    {'name':'平均耗时：10m'},
                    {'name':'状态：较慢'}
                ]
            };
            let node2 = metricFlow.createNode(node2Data,30,300);

            let node3Data= {
                "id":"primaryKey3",
                "title":{'name':"C系统日志"},
                "data":[
                    {'name':'描述：从C系统抽取日志'},
                    {'name':'抽取频率：一天一次'},
                    {'name':'平均耗时：5s'}.........完整代码请登录后点击上方下载按钮下载查看