vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

131 lines
4.2 KiB

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Graph | Custom style</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt arial;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="../../vis.js"></script>
  16. <script type="text/javascript">
  17. var nodes = null;
  18. var edges = null;
  19. var options = null;
  20. var graph = null;
  21. // Called when the Visualization API is loaded.
  22. function draw() {
  23. // create nodes
  24. nodes = [
  25. {id: 1, label: 'black node', group: 'black'},
  26. {id: 2, label: 'black node', group: 'black'},
  27. {id: 3, label: 'black node', group: 'black'},
  28. {id: 4, label: 'red node', group: 'black', color: 'red'},
  29. {id: 5, label: 'gray node', group: 'gray'},
  30. {id: 6, label: 'gray node', group: 'gray'},
  31. {id: 7, label: 'gray node', group: 'gray'},
  32. {id: 8, label: 'gray node', group: 'gray'},
  33. {id: 9, label: 'image node', group: 'white'},
  34. {id: 10, label: 'image node', group: 'white'},
  35. {id: 11, label: 'default node'},
  36. {id: 12, label: 'default node'}
  37. ];
  38. // create edges
  39. edges = [
  40. {from: 1, to: 2},
  41. {from: 1, to: 3},
  42. {from: 1, to: 4},
  43. {from: 5, to: 6},
  44. {from: 5, to: 7},
  45. {from: 5, to: 8},
  46. {from: 9, to: 10},
  47. {from: 9, to: 11},
  48. {from: 9, to: 12},
  49. {from: 1, to: 5},
  50. {from: 5, to: 9},
  51. {from: 9, to: 1}
  52. ];
  53. // specify options
  54. options = {
  55. stabilize: false,
  56. edges: {
  57. length: 120,
  58. width: 2,
  59. style: 'arrow',
  60. color: 'gray'
  61. },
  62. nodes: {
  63. // default for all nodes
  64. fontFace: 'times',
  65. shape: 'circle',
  66. color: {
  67. border: 'orange',
  68. background: 'yellow',
  69. highlight: {
  70. border: 'darkorange',
  71. background: 'gold'
  72. }
  73. }
  74. },
  75. groups: {
  76. black: {
  77. // defaults for nodes in this group
  78. radius: 15,
  79. color: 'black',
  80. fontColor: 'white',
  81. fontSize: 18,
  82. fontFace: 'courier',
  83. shape: 'rect'
  84. },
  85. gray: {
  86. color: {
  87. border: 'black',
  88. background: 'gray',
  89. highlight: {
  90. border: 'black',
  91. background: 'lightgray'
  92. }
  93. },
  94. fontSize: 18,
  95. fontFace: 'arial',
  96. shape: 'circle'
  97. },
  98. white: {
  99. color: {
  100. border: 'black',
  101. background: 'white'
  102. },
  103. fontColor: 'red',
  104. shape: 'image',
  105. image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
  106. }
  107. }
  108. };
  109. // create the graph
  110. var container = document.getElementById('mygraph');
  111. var data = {
  112. nodes: nodes,
  113. edges: edges
  114. };
  115. graph = new vis.Graph(container, data, options);
  116. }
  117. </script>
  118. </head>
  119. <body onload="draw()">
  120. <div id="mygraph"></div>
  121. </body>
  122. </html>