提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

使用JointJS绘制流程图1

依赖
2023-04-18 13:11:36 时间

JointJS官网

依赖：jquery，lodash，backbone 如果使用自动排版，需要添加依赖：dagre，graphlib

文中样例使用的资源文件

样例

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/lodash.js"></script>
    <script src="js/backbone.js"></script>

    <script src="joint/joint.min.js"></script>

    <link href="joint/joint.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="chart"></div>
<script>
	// 创建图画模型对象
    const graph = new joint.dia.Graph;
    // 创建画布
    const paper = new joint.dia.Paper({
        el: document.getElementById('chart'),
        model: graph,
        width: 1000,
        height: 600,
        gridSize: 1
    });
	// 绘制节点
    drawNode = function (x, y, text) {
        const rect = new joint.shapes.standard.Rectangle();
        rect.position(x, y);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: text,
                fill: 'white'
            }
        });
        rect.addTo(graph);
        return rect;
    }
	// 连接节点
    link = function (source, target) {
        var link = new joint.shapes.standard.Link();
        link.source(source);
        link.target(target);
        link.addTo(graph);
    }
    
    const node1 = drawNode(100, 100, "node1");
    const node2 = drawNode(300, 100, "node2");
    const node3 = drawNode(500, 200, "node3");
    const node4 = drawNode(700, 200, "node4");
    const node5 = drawNode(900, 100, "node5");
    link(node1, node2);
    link(node2, node3);
    link(node3, node4);
    link(node4, node5);
    link(node2, node5);
</script>
</body>
</html>

使用自动布局

	<!-- 引入依赖 -->
    <script src="dagre/dagre.min.js"></script>
    <script src="dagre/graphlib.min.js"></script>
    <script>
        // 进行排版
        joint.layout.DirectedGraph.layout(graph, {
	       rankDir: "BT", // 排版方向可以支持'TB' | 'BT' | 'LR' | 'RL'四种方向，默认为TB自上而下
	       nodeSep: 100, //节点间隔
	       edgeSep: 100 // 边间隔
	   });
    </script>

效果

相关文章