使用GraphVis开发简单的组态图

最新推荐文章于 2024-04-10 09:56:46 发布

itsz666

最新推荐文章于 2024-04-10 09:56:46 发布

阅读量1.5k

点赞数

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/yy17706753/article/details/126742221

版权

效果图如下：

下面直接上代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width">
       <title>GraphVis基础使用示例</title>
       <script src="http://media.graphvis.cn/libs/jquery-3.3.1.min.js"></script>
       
       <script src="http://media.graphvis.cn/libs/graphvis.20220327.min.js"></script>
   </head>
   <body>
       
       <div id="graph-panel" style="width:100%;height:calc(100vh - 16px);background-color:#efefef;"></div>

       <script type="text/javascript">
           //GraphVis可视化对象通用配置项
           var config = {
               node: { //节点的默认配置
                   label: { //标签配置
                       show: true, //是否显示
                       color: '20,20,20', //字体颜色
                       font: 'normal 14px KaiTi', //字体大小及类型
                       textPosition: 'Bottom_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right,Middle_Center
                   },
                   shape: 'circle', //rect,circle,star
                   size:50,
                   color: '80,200,255' //节点颜色
               },
               link: { //连线的默认配置
                   label: { //连线标签
                       show: true, //是否显示
                       color: '50,50,50', //字体颜色
                       font: 'normal 13px Arial', //字体大小及类型
                   },
                   lineType: 'direct', //连线类型,direct,curver,vlink,hlink,vbezier,hbezier,bezier
                   color: '80,200,255', //连线颜色
                   showArrow: true //显示连线箭头
               },
               wheelZoom: 0.8, //开启鼠标滚轮缩放
               highLightNeiber: false //相邻节点高亮开关
           };

           //1、创建GraphVis对象，进行方法调用
           var visgraph = new VisGraph(document.getElementById('graph-panel'), config);
           visgraph.switchAnimate(true);//开启无限重绘模式，动画流畅，但大数据量时影响性能

           //2、添加节点
           var nodeA = visgraph.addNode({id:1,label:"电网",x:10,y:200});
           nodeA.fillColor = visgraph.randomColor();

           var nodeB = visgraph.addNode({id:2,label:"逆变器",x:400,y:300});
           nodeB.fillColor = visgraph.randomColor();

           var nodeC = visgraph.addNode({id:3,label:"电池",x:800,y:500});
           nodeC.fillColor = visgraph.randomColor();

           var nodeD = visgraph.addNode({id:4,label:"电池",x:10,y:500});

           var nodeE = visgraph.addNode({id:5,label:"家电",x:800,y:200});

           //3、添加关系连线 source和target对应node的id
           var linkA = visgraph.addEdge({source:1,target:2,label:'关系1'});
           linkA.lineDash=[3,8,5];//虚线
           linkA.animate=true;//开启连线流动动画（性能消耗高）
           linkA.strokeColor = linkA.fontColor = visgraph.randomColor();

           /*var linkB = visgraph.addEdge({source:1,target:3,label:'关系2'});
           linkB.animate=true;//开启连线流动动画（性能消耗高）
           linkB.animateBallColor='120,120,240';//流动球体颜色
           linkB.animateBallSize=4;//流动球体大小
           linkB.strokeColor = linkB.fontColor = visgraph.randomColor();
           linkB.lineType='bezier';
           linkB.showArrow=false;*/


           var linkC = visgraph.addEdge({source:2,target:3,label:'关系3'});
           linkC.lineDash=[3,5,3];//虚线
           linkC.arrowType='triangle';//箭头设为三角
           linkC.animate=true;//开启连线流动动画（性能消耗高）
           linkC.strokeColor = linkC.fontColor = visgraph.randomColor();

           /*var linkD = visgraph.addEdge({source:3,target:4,label:'关系4'});
           linkD.animate=true;
           linkD.strokeColor = linkD.fontColor = visgraph.randomColor();*/

           var linkE = visgraph.addEdge({source:4,target:2,label:'关系5'});
           linkE.lineDash=[3,5,3];//虚线
           linkE.animate=true;

           var linkF = visgraph.addEdge({source:2,target:5,label:'关系5'});
           linkF.lineDash=[3,5,3];//虚线
           linkF.arrowType='triangle';//箭头设为三角
           linkF.animate=true;//开启连线流动动画（性能消耗高）
           linkF.strokeColor = linkF.fontColor = visgraph.randomColor();

           visgraph.moveCenter(); //居中
       </script>
   </body>
</html>