josdejong
11 years ago
1 changed files with 119 additions and 0 deletions
Unified View
Diff Options
+ 119
- 0
examples/graph/15_custom_style.html
View File
| @ -0,0 +1,119 @@ | |||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||||
| <html> | |||||
| <head> | |||||
| <title>Graph | Custom style</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt arial; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript" src="../../vis.js"></script> | |||||
| <script type="text/javascript"> | |||||
| var nodes = null; | |||||
| var edges = null; | |||||
| var options = null; | |||||
| var graph = null; | |||||
| // Called when the Visualization API is loaded. | |||||
| function draw() { | |||||
| // create nodes | |||||
| nodes = [ | |||||
| {id: 1, label: 'black node', group: 'black'}, | |||||
| {id: 2, label: 'black node', group: 'black'}, | |||||
| {id: 3, label: 'black node', group: 'black'}, | |||||
| {id: 4, label: 'red node', group: 'black', backgroundColor: 'red'}, | |||||
| {id: 5, label: 'gray node', group: 'gray'}, | |||||
| {id: 6, label: 'gray node', group: 'gray'}, | |||||
| {id: 7, label: 'gray node', group: 'gray'}, | |||||
| {id: 8, label: 'gray node', group: 'gray'}, | |||||
| {id: 9, label: 'image node', group: 'white'}, | |||||
| {id: 10, label: 'image node', group: 'white'}, | |||||
| {id: 11, label: 'default node'}, | |||||
| {id: 12, label: 'default node'} | |||||
| ]; | |||||
| // create edges | |||||
| edges = [ | |||||
| {from: 1, to: 2}, | |||||
| {from: 1, to: 3}, | |||||
| {from: 1, to: 4}, | |||||
| {from: 5, to: 6}, | |||||
| {from: 5, to: 7}, | |||||
| {from: 5, to: 8}, | |||||
| {from: 9, to: 10}, | |||||
| {from: 9, to: 11}, | |||||
| {from: 9, to: 12}, | |||||
| {from: 1, to: 5}, | |||||
| {from: 5, to: 9}, | |||||
| {from: 9, to: 1} | |||||
| ]; | |||||
| // specify options | |||||
| options = { | |||||
| 'width': '600px', | |||||
| 'height': '600px', | |||||
| 'stabilize': false, | |||||
| 'edges': { | |||||
| 'length': 120, | |||||
| 'width': 2, | |||||
| 'style': 'arrow', | |||||
| 'color': 'gray' | |||||
| }, | |||||
| 'nodes': { | |||||
| // default for all nodes | |||||
| 'fontFace': 'times', | |||||
| 'shape': 'circle', | |||||
| 'borderColor': 'orange', | |||||
| 'backgroundColor': 'yellow', | |||||
| 'highlightColor': 'gold' | |||||
| }, | |||||
| 'groups': { | |||||
| 'black': { | |||||
| // defaults for nodes in this group | |||||
| 'radius': 15, | |||||
| 'borderColor': 'black', | |||||
| 'backgroundColor': 'black', | |||||
| 'highlightColor': 'black', | |||||
| 'fontColor': 'white', | |||||
| 'fontSize': 18, | |||||
| 'fontFace': 'courier', | |||||
| 'shape': 'rect' | |||||
| }, | |||||
| 'gray': { | |||||
| 'borderColor': 'black', | |||||
| 'backgroundColor': 'gray', | |||||
| 'highlightColor': 'gray', | |||||
| 'fontSize': 18, | |||||
| 'fontFace': 'arial', | |||||
| 'shape': 'circle' | |||||
| }, | |||||
| 'white': { | |||||
| 'borderColor': 'black', | |||||
| 'backgroundColor': 'white', | |||||
| 'highlightColor': 'white', | |||||
| 'fontColor': 'red', | |||||
| 'shape': 'image', | |||||
| 'image': 'img/soft-scraps-icons/User-Coat-Blue-icon.png' | |||||
| } | |||||
| } | |||||
| }; | |||||
| // create the graph | |||||
| var container = document.getElementById('mygraph'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| graph = new vis.Graph(container, data, options); | |||||
| } | |||||
| </script> | |||||
| </head> | |||||
| <body onload="draw()"> | |||||
| <div id="mygraph"></div> | |||||
| </body> | |||||
| </html> | |||||