javascript - GOJS，围绕节点的圆环图

Question

我正在尝试设计一个节点模板，其中将有一个围绕节点的圆环图，如下例所示:



节点数据将为 5 个不同的属性提供 5 个值，并且每个值都由节点周围的不同颜色表示。

我看过 GoJs 饼图示例 https://gojs.net/latest/samples/pieCharts.html

我试图在饼图中添加空心圆，使其看起来像 donut chart 。我从看 开始戒指形状来自 GoJs 形状 https://gojs.net/latest/samples/shapes.html

所以，我正在修改函数 makeGeo 来自饼图示例。以下是我的代码。

function makeGeo(data) {
    var start = data.start;
    var sweep = data.sweep;
    var end = start + sweep;
    var param1 = 8;
    var w = 100;
    var geo = new go.Geometry();
    var rad = w / 2;

    var fig = new go.PathFigure(rad, rad, true);  // clockwise
    geo.add(fig);
    fig.add(new go.PathSegment(go.PathSegment.Arc, start, sweep, rad, rad, rad, rad));

    var rad2 = Math.max(rad - param1, 0);
    if (rad2 > 0) {  // counter-clockwise
        //fig.add(new go.PathSegment(go.PathSegment.Move, rad + rad2, rad));
        fig.add(new go.PathSegment(go.PathSegment.Arc, end, -(sweep), rad, rad, rad2, rad2));
    }

    geo.defaultStretch = go.GraphObject.Uniform;
    return geo;
}

This is my output so far

任何帮助将不胜感激

Answer 1

您正在调用 PathSegment.close 两次。我建议你只在最后一次调用它，而不是第一次调用它。