sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:58:59 +02:00
parent 9b907d9545
commit 87ee3b4ff0
1 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
js/dos/ext/vis/examples/network/nodeStyles/colors.html Normal file
View File

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:700px;
}
</style>
</head>
<body>
<p>
Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label:'html color', color: 'lime'},
{id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
{id: 3, label:'hex color', color: '#7BE141'},
{id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
{id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
{id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
{id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
])
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 2, to: 6},
{from: 4, to: 7},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth: 2},
interaction: {hover: true}
}
var network = new vis.Network(container, data, options);
</script>
<script src="../../googleAnalytics.js"></script>
</body>
</html>