master

Branches (1)

Tags (12)

Manage

Manage

master

v1.2.1

v1.2.0

v1.1.4

v1.1.3

v1.1.2

v1.1.1

v1.1.0

v1.0.4

v1.0.3

v1.0.2

v1.0.1

v1.0.0

metricflow
/
demo
/
demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MetricFlow</title>
    <style>
    </style>

<!--    <script src="../src/components/metricflow.min.js"></script>-->
    <script src="../src/components/metricflow-1.2.0.min.js"></script>
    <script>
        window.onload = function () {

            let metricFlow = MetricFlow("graph")

            /*定义节点数据*/
            let node1Data= {
                "id":"primaryKey",
                "title":{'name':"运行时间统计"}, //标题背景颜色
                "data":[
                   {'name':'方法：IndexController#method1'},
                   {'name':'平均耗时：0.333ms'},
                 ]
            };
            let node1 = metricFlow.createNode(node1Data,10,200);


            let node2Data= {
                "id":"primaryKey2", //节点的id不能相同，否则会被覆盖
                "title":{'name':"运行时间统计"},//标题背景颜色
                "data":[
                    {'name':'方法：IndexController#method1'},//第一个元素背景颜色
                    {'name':'平均耗时：0.333ms'},//第二个元素背景颜色
                ]
            };
            /*在(20,200)坐标上创建一个节点*/
            let node2 = metricFlow.createNode(node2Data,400,100);

            let node3Data= {
                'x':400,
                'y':300,
                "id":"primaryKey3", //节点的id不能相同，否则会被覆盖
                "title":{'name':"运行时间统计"},
                "data":[
                    {'name':'方法：IndexController#method1'},
                    {'name':'平均耗时：0.333ms'},
                ]
            };
            /*在(20,200)坐标上创建一个节点*/
            let node3 = metricFlow.createNode(node3Data);

            /*连接两个节点*/
            metricFlow.createLink(node1,node2);
            metricFlow.createLink(node1,node3);
        }

    </script>
</head>
<body>
<!--定义一个画布 graph -->
<div id="graph" height="700px" width="1100px" >
</div>
</body>
</html>