I want to draw a ring chart

GoJS
1

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

2 
  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

3

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

4

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

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

5

I think Pie Charts 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 Radial Partition Layout does something similar to what you want, although the geometries are centered differently.