jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
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.
2679 Commits
33 Branches
634 MiB
Tree: 3633bd9d56
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '3633bd9d56'
${ noResults }
jrtechs-vis/examples/network/nodeStyles/shapesWithDashedBorders.html

61 lines
2.4 KiB
Raw Normal View History

Added a shapeProperties object allowing configuration of shapes. Replaced dashes property in options.js with a shapeProperties object containing a borderDashes property. Replaced dashes property in defaultOptions in NodesHandler.js with shapeProperties object having its borderDashes property set to false. Created implementations of enableBorderDashes and disableBorderDashes functions in NodeBase.js Updated CircleImageBase to use enableBorderDashes and disableBorderDashes for enabling/disabling dashed borders. Added to ShapeBase enableBorderDashes and disableBorderDashes calls to allow all shapes that have borders to have the dashed borders feature. Updated example demonstrating how to apply the dashed border to a circularImage node Created example demonstrating how to apply the dashed border to a all shapes that support dashed borders. Updated documentation explaining the usage of the shapeProperties.
9 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
generate individual css files for network and timeline (#1970) * generate individual css files; fixes #1969 * simplified css bundleing * add new generated dist-css files * use chart specific css files in the examples
8 years ago
Added a shapeProperties object allowing configuration of shapes. Replaced dashes property in options.js with a shapeProperties object containing a borderDashes property. Replaced dashes property in defaultOptions in NodesHandler.js with shapeProperties object having its borderDashes property set to false. Created implementations of enableBorderDashes and disableBorderDashes functions in NodeBase.js Updated CircleImageBase to use enableBorderDashes and disableBorderDashes for enabling/disabling dashed borders. Added to ShapeBase enableBorderDashes and disableBorderDashes calls to allow all shapes that have borders to have the dashed borders feature. Updated example demonstrating how to apply the dashed border to a circularImage node Created example demonstrating how to apply the dashed border to a all shapes that support dashed borders. Updated documentation explaining the usage of the shapeProperties.
9 years ago
​
​
​
​
​
​
​
Corrected the shapeProperties.borderDashes property type description Changed shapeProperties.borderDashes type description from "Object or Boolean" to Array or Boolean". Merged circularImageWithDashedBorder example into shapesWithDashedBorders example. Added enableBorderDashes and disableBorderDashes function calls to Database.js, Ellipse.js and Box.js, to enable/disable dashed borders.
9 years ago
​
​
​
​
​
​
​
​
- Added #931, borderRadius in shapeProperties for the box shape.
9 years ago
Corrected the shapeProperties.borderDashes property type description Changed shapeProperties.borderDashes type description from "Object or Boolean" to Array or Boolean". Merged circularImageWithDashedBorder example into shapesWithDashedBorders example. Added enableBorderDashes and disableBorderDashes function calls to Database.js, Ellipse.js and Box.js, to enable/disable dashed borders.
9 years ago
Added a shapeProperties object allowing configuration of shapes. Replaced dashes property in options.js with a shapeProperties object containing a borderDashes property. Replaced dashes property in defaultOptions in NodesHandler.js with shapeProperties object having its borderDashes property set to false. Created implementations of enableBorderDashes and disableBorderDashes functions in NodeBase.js Updated CircleImageBase to use enableBorderDashes and disableBorderDashes for enabling/disabling dashed borders. Added to ShapeBase enableBorderDashes and disableBorderDashes calls to allow all shapes that have borders to have the dashed borders feature. Updated example demonstrating how to apply the dashed border to a circularImage node Created example demonstrating how to apply the dashed border to a all shapes that support dashed borders. Updated documentation explaining the usage of the shapeProperties.
9 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <title>Network | Shapes</title>
  5. 

  6.   <style type="text/css">
  7.     #mynetwork {
  8.       width: 1000px;
  9.       height: 800px;
  10.       border: 1px solid lightgray;
  11.     }
  12.   </style>
  13. 

  14.   <script type="text/javascript" src="../../../dist/vis.js"></script>
  15.   <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
  16. 

  17.   <script type="text/javascript">
  18.     var nodes = null;
  19.     var edges = null;
  20.     var network = null;
  21. 

  22.     function draw() {
  23.       nodes = [
  24.         {id: 1, font:{size:30},          label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
  25.         {id: 2, font:{size:30},          label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
  26.         {id: 3, font:{size:30},          label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
  27.         {id: 4, font:{size:30},          label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
  28.         {id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
  29.         {id: 6, font:{size:30}, size:40, label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
  30.         {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
  31.         {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
  32.         {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
  33.         {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
  34.         {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
  35.       ];
  36. 

  37.       edges = [
  38.       ];
  39. 

  40.       // create a network
  41.       var container = document.getElementById('mynetwork');
  42.       var data = {
  43.         nodes: nodes,
  44.         edges: edges
  45.       };
  46.       var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
  47.       network = new vis.Network(container, data, options);
  48.     }
  49.   </script>
  50.   <script src="../../googleAnalytics.js"></script>
  51. 

  52. <body onload="draw()">
  53. 

  54. <p>
  55.   Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
  56. </p>
  57. <div id="mynetwork"></div>
  58. 

  59. <div id="info"></div>
  60. </body>
  61. </html>