gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
109 lines (105 loc) • 4.38 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Pie Charts</title>
<meta name="description" content="GoJS nodes containing simple pie charts, each slice showing a tooltip." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
nodeTemplate:
$(go.Node, "Vertical",
$(go.Panel,
new go.Binding("itemArray", "slices"),
{
itemTemplate:
$(go.Panel,
$(go.Shape,
{ fill: "lightgreen", isGeometryPositioned: true },
new go.Binding("fill", "color"),
new go.Binding("geometry", "", makeGeo)),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", function(data) {
return data.color + ": " + data.start +
" to " + (data.start + data.sweep);
}))
)
}
)
}),
$(go.TextBlock,
new go.Binding("text"))
),
model: $(go.GraphLinksModel,
{
copiesArrays: true,
copiesArrayObjects: true,
nodeDataArray:
[ // node data
{
key: 1,
text: "full circle",
slices: [
{ start: -30, sweep: 60, color: "white" },
{ start: 30, sweep: 300, color: "red" }
]
},
{
key: 2,
text: "partial circle",
slices: [
{ start: 0, sweep: 120, color: "lightgreen" },
{ start: 120, sweep: 70, color: "blue" },
{ start: 250, sweep: 20, color: "yellow" }
]
}
],
linkDataArray:
[ // link data
{ from: 1, to: 2 }
]
})
}
);
function makeGeo(data) {
// this is much more efficient than calling go.GraphObject.make:
return new go.Geometry()
.add(new go.PathFigure(50, 50) // start point
.add(new go.PathSegment(go.PathSegment.Arc,
data.start, data.sweep, // angles
50, 50, // center
50, 50) // radius
.close()));
}
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 500px;"></div>
<p>
Each node has a Position Panel whose <a>Panel.itemArray</a> is data bound to the "slices" property of the node data.
That "slices" property is an Array of data objects; for each item the <a>Panel.itemTemplate</a> produces a Shape whose
<a>Shape.geometry</a> is computed using a conversion function to generate a pie-shaped slice given a start angle
and a sweep angle from the item data.
Note that <a>Shape.isGeometryPositioned</a> is true to make sure all of the Shapes are positioned
by their computed geometries, independent of any stroke width.
Each slice Panel also has a tooltip showing some information.
</p>
<p>
For more sophisticated charts within nodes, see the <a href="canvases.html">Canvas Charts</a> sample.
</p>
</div>
</body>
</html>