Javascript GOJS,节点周围的圆环图

Javascript GOJS,节点周围的圆环图,javascript,donut-chart,gojs,Javascript,Donut Chart,Gojs,我正在尝试设计一个节点模板,其中节点周围将有一个圆环图,如以下示例所示: 节点数据将为5个不同的属性提供5个值,每个值将由节点周围的不同颜色表示 我已经看到了GoJs饼图示例 我试图在饼图中加上空心圆,使它看起来像油炸圈饼图。我从GoJs形状中的环形开始 因此,我正在修改饼图示例中的函数makeGeo。下面是我的代码 function makeGeo(data) { var start = data.start; var sweep = data.sweep; var

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

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

我已经看到了GoJs饼图示例

我试图在饼图中加上空心圆,使它看起来像油炸圈饼图。我从GoJs形状中的环形开始

因此,我正在修改饼图示例中的函数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;
}


我们将非常感谢您对PathSegment的任何帮助。请关闭两次。我建议您最后一次使用它,而不是第一次使用。

我使用的是GoJS版本1.6.15,使用PathSegment.close一次,甚至不使用它,都没有任何区别。然而,注释下面的行使输出看起来有点接近目标<代码>图添加(新go.PathSegment(go.PathSegment.Move,rad+rad2,rad))我已经更新了makeGeo函数,现在您可以看到更新的输出。我想我现在很接近了,但是我不知道如何修复这些细线。。。