jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。官网：http://www.jtopo.com/

jTopo是免费的，而且文档是中文的，很容易看懂。你可以基于它进行二次开发，能够快速创建一些关系图、拓扑等相关图形化的展示。

下面是我用jTopo绘制网络拓扑图的小例子：

<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="./jtopo-0.4.8-min.js"></script>
        <script src="./jquery.js"></script>
        <script type="text/javascript">
                   
           $(document).ready(function(){
                function node(x, y, img){
                    var node = new JTopo.Node();
                    node.setImage(\'./img/\' + img, true);                
                    node.setLocation(x, y);
                    scene.add(node);
                    return node;
                }
                function node2(img){
                    var node = new JTopo.Node();
                    node.setImage(\'./img/\' + img, true);                
                    // node.setLocation(x, y);
                    scene.add(node);
                    return node;
                }
                function linkNode(nodeA, nodeZ, f){
                    var link;
                    if(f){
                        link = new JTopo.FoldLink(nodeA, nodeZ);
                    }else{
                        link = new JTopo.Link(nodeA, nodeZ);
                    }
                    link.direction = \'vertical\';
                    scene.add(link);
                    return link;
                }

                var canvas = document.getElementById(\'canvas\');         
                var stage = new JTopo.Stage(canvas);
                var scene = new JTopo.Scene(stage);
                //设置背景
                scene.background = \'./img/bg.jpg\';

                var r1 = node(500, 100, \'router.png\');
                //使用树形拓扑时，根节点要做如下赋值
                r1.layout = {type: \'tree\', width:100, height: 100};

                // var s1 = node(400, 100, \'server.png\');
                var s1 = node2(\'server.png\');
                s1.text = \'192.168.1.1\'; // 文字
                s1.fontColor = \'0,0,0\';
                

                // var s2 = node(400, 200, \'server.png\');
                var s2 = node2(\'server.png\');
                s2.text = \'192.168.1.2\'; 
                s2.fontColor = \'0,0,0\';
                // s2.layout = {type: \'tree\', width:50, height: 100};

                var c1 = node(100, 100, \'client.png\');
                c1.text = \'127.0.0.1\'; 
                c1.fontColor = \'0,0,0\';

                var cloud = node(200, 80, \'cloud.png\');
                cloud.text=\'公网\';
                cloud.textPosition = \'Middle_Center\';// 文字居中
                cloud.fontColor = \'0,0,0\';

                var web_server = node(300, 100, \'server_database.png\');
                web_server.text=\'web服务器\';
                web_server.fontColor = \'0,0,0\';

                var r2 = node(400, 100, \'router.png\');
                linkNode(c1,cloud);
                linkNode(cloud,web_server);
                linkNode(web_server,r2);
                linkNode(r2,r1);

                //画树形拓扑时要把父节点放置于第一个参数，比如此函数中的r1
                linkNode(r1, s1);
                linkNode(r1, s2);

                s2.alarm="ping不通";
                setInterval(function(){
                    if(s2.alarm == \'ping不通\'){
                        s2.alarm = null;
                    }else{
                        s2.alarm = \'ping不通\'
                    }
                }, 600);
                // linkNode(h1, r1);

                JTopo.layout.layoutNode(scene, r1, true);

            }
            );

        </script>
    </head>
    <body>
        <canvas id="canvas" width="910" height="400"></canvas>
    </body>
</html>

效果图如：

 

版权声明：本文为lovealways原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lovealways/p/9090556.html