I want to draw a ring chart

I’d like to draw a ring statistical chart. This ring has different color configurations. How can I locate the node template?
1

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        $(go.Panel,
          $(go.Shape, { fill: "transparent", stroke: "cyan", strokeWidth: 3 },
            new go.Binding("geometry", "value", makeArc),
            new go.Binding("stroke", "color1")),
          $(go.Shape, { fill: "transparent", stroke: "gray", strokeWidth: 3 },
            new go.Binding("geometry", "value", makeArcRest),
            new go.Binding("stroke", "color2"))
        ),
        $(go.TextBlock,
          new go.Binding("text"))
      );

    // These arcs assume the angle starts at 270 degrees, at the top of the circle.
    // They all assume the circle is 100x100 in size.
    function makeArc(sweep) {
      return new go.Geometry()
          .add(new go.PathFigure(50, 0)
              .add(new go.PathSegment(go.PathSegment.Arc, -90, sweep, 50, 50, 50, 50)));
    }

    function makeArcRest(sweep) {
      var p = new go.Point(50, 0).rotate(-90+sweep).offset(50, 50);
      return new go.Geometry()
          .add(new go.PathFigure(p.x, p.y)
              .add(new go.PathSegment(go.PathSegment.Arc, sweep-90, 360-sweep, 50, 50, 50, 50)));
    }

    myDiagram.model = new go.GraphLinksModel(
    [
      { text: "Alpha", value: 0 },
      { text: "Beta", value: 90 },
      { text: "Gamma", value: 135 },
      { text: "Delta", value: 330, color1: "red", color2: "green" }
    ]);
  }

produces:
image

Thank you for your reply. It’s very useful to me There is another scenario that can’t be realized. There may be many colors of the ring. The data is configured dynamically. What should I do23

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

I think https://gojs.net/latest/samples/pieCharts.html does what you want, except you need to adapt the makeGeo function so that it returns a Geometry that is what you want. The makeAnnularWedge function in https://gojs.net/latest/samples/radialPartition.html does something similar to what you want, although the geometries are centered differently.