您最多选择25个主题
主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
61 行
2.4 KiB
61 行
2.4 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Network | Shapes</title>
|
|
|
|
<style type="text/css">
|
|
#mynetwork {
|
|
width: 1000px;
|
|
height: 800px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
|
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script type="text/javascript">
|
|
var nodes = null;
|
|
var edges = null;
|
|
var network = null;
|
|
|
|
function draw() {
|
|
nodes = [
|
|
{id: 1, font:{size:30}, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 2, font:{size:30}, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 3, font:{size:30}, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 4, font:{size:30}, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 6, font:{size:30}, size:40, label: 'dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 7, font:{size:30}, size:40, label: 'square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
|
|
{id: 10, font:{size:30}, size:40, label: 'star', shape: 'star', shapeProperties:{borderDashes:true}},
|
|
{id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
|
|
];
|
|
|
|
edges = [
|
|
];
|
|
|
|
// create a network
|
|
var container = document.getElementById('mynetwork');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
|
|
network = new vis.Network(container, data, options);
|
|
}
|
|
</script>
|
|
|
|
|
|
<body onload="draw()">
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
<div id="mynetwork"></div>
|
|
|
|
<div id="info"></div>
|
|
</body>
|
|
</html>
|