I need a ring chart

273918b3
Convert data to this image.A circle made up of many fan-shaped rings.
timg

I refer to it. demo: https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/radialPartition.html
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>

573623f1

A post was merged into an existing topic: I want to draw a ring chart