! DOCTYPE html html head title Hello Qunee for HTML5 / title meta charset ="utf-8" / head body div style ="height: 500px;" id ="canvas" / div script src ="http://demo.qunee.com/js/common/qunee-min.js" / script script type ="text/javascript"
<!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> <meta charset="utf-8"> </head> <body> <div style="height: 500px;" id="canvas"></div> <script src="http://demo.qunee.com/js/common/qunee-min.js"></script> <script type="text/javascript" src="./qunee/jquery.min.js"></script> // 自己找这个js文件 <!--<script src="http://img.558idc.com/uploadfile/allimg/210612/11353G014-0.jpg"></script>--> <script src="http://img.558idc.com/uploadfile/allimg/210612/11353G014-0.jpg"></script> <script> var graph = new Q.Graph(canvas); var hello = graph.createNode("Hello", -100, -50); hello.image = Q.Graphs.server; var qunee = graph.createNode("Qunee", 100, 50); var edge = graph.createEdge("Hello\nQunee", hello, qunee); edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10); edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP); edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM); edge.setStyle(Q.Styles.LABEL_BORDER, 1); edge.setStyle(Q.Styles.LABEL_POINTER, true); edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5)); edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL); // 创建缩略图的div var overviewDiv = document.createElement(‘div‘); overviewDiv.style.width = ‘200px‘; overviewDiv.style.height = ‘200px‘; overviewDiv.style.position = ‘absolute‘; overviewDiv.style.top = ‘10px‘; overviewDiv.style.right = ‘10px‘; // overviewDiv.style.backgroundColor = ‘red‘;
// 将创建好的div添加到graph里面 graph.html.appendChild(overviewDiv);
// 通过Overview方法生成缩略图 var overview = new Q.Overview(overviewDiv, graph); </script> </body> </html>