Convert data to this image.A circle made up of many fan-shaped rings.
I refer to it. demo: GoJS/radialPartition.html at master · NorthwoodsSoftware/GoJS · GitHub
But I still don’t understand.
Can you help me. Thank you
Final code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px blue; width:500px; height:300px"></div>
<script>
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: 'transparent',
stroke: 'cyan',
strokeWidth: 5,
isGeometryPositioned: true
},
new go.Binding('stroke', 'color'),
// 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: [
{
key: 1,
text: 'full circle',
slices: [{ start: -30, sweep: 60, color: 'green' }, { start: 30, sweep: 300, color: 'red' }]
},
{
key: 2,
text: 'partial circle',
slices: [
{ start: 0, sweep: 180, color: 'lightgreen' },
{ start: 180, sweep: 70, color: 'blue' },
{ start: 250, sweep: 30, color: 'gree' },
{ start: 280, sweep: 60, color: 'yellow' },
{ start: 340, sweep: 20, color: 'red' }
]
}
],
linkDataArray: [{ from: 1, to: 2 }]
})
});
function makeGeo(data) {
var p = new go.Point(50, 0).rotate(data.start).offset(50, 50);
return new go.Geometry().add(
new go.PathFigure(p.x, p.y).add(
new go.PathSegment(go.PathSegment.Arc, data.start, data.sweep, 50, 50, 50, 50) // .close()
)
);
}
init();
</script>
</body>
</html>
