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.

59 lines
1.8 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Dashed lines</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. </style>
  10. <script type="text/javascript" src="../../vis.js"></script>
  11. <script type="text/javascript">
  12. // Called on page load
  13. function draw() {
  14. var nodes = [
  15. {id: 1, label: "dashed\nline\nexamples"},
  16. {id: 2, label: "default"},
  17. {id: 3, label: "dashlength: 20\ndashgap: 20"},
  18. {id: 4, label: "dashlength: 20\ndashgap: 5"},
  19. {id: 5, label: "dashlength: 5\ndashgap: 20"},
  20. {id: 6, label: "dashlength: 20\ndashgap: 5\naltdashlength: 5"}
  21. ];
  22. var edges = [
  23. {from: 1, to: 2, style: "dash-line"},
  24. {from: 1, to: 3, style: "dash-line", dashlength: 20, dashgap: 20},
  25. {from: 1, to: 4, style: "dash-line", dashlength: 20, dashgap: 5},
  26. {from: 1, to: 5, style: "dash-line", dashlength: 5, dashgap: 20},
  27. {from: 1, to: 6, style: "dash-line", dashlength: 20, dashgap: 5, altdashlength: 5}
  28. ];
  29. // create the graph
  30. var container = document.getElementById('mygraph');
  31. var data = {
  32. nodes: nodes,
  33. edges: edges
  34. };
  35. var options = {
  36. width: '600px',
  37. height: '600px',
  38. edges: {
  39. length: 200
  40. },
  41. stabilize: false
  42. };
  43. var graph = new vis.Graph(container, data, options);
  44. }
  45. </script>
  46. </head>
  47. <body onload="draw();">
  48. <p>
  49. This example shows the different options for dashed lines.
  50. </p>
  51. <div id="mygraph"></div>
  52. </body>
  53. </html>