GOJS, Пончиковая диаграмма вокруг узла

Я пытаюсь создать шаблон узла, в котором вокруг узла будет кольцевая диаграмма, как в следующем примере:

Вот как я хочу, чтобы это выглядело

Данные узла предоставят 5 значений для 5 различных атрибутов, и каждый из них будет представлен другим цветом вокруг узла.

Я видел пример круговой диаграммы GoJs https://gojs.net/latest/samples/pieCharts.html

И я пытаюсь добавить полый круг в круговую диаграмму, чтобы она выглядела как кольцевая диаграмма. Я начал с рассмотрения формы кольца из GoJs Shapes 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;
}

Пока это мои результаты

Любая помощь будет высоко оценена


person Abdullah    schedule 29.05.2018    source источник
comment
Я использую GoJS версии 1.6.15   -  person Abdullah    schedule 29.05.2018


Ответы (1)


Вы дважды вызываете PathSegment.close. Я предлагаю вам звонить только в последний раз, а не в первый раз.

person Walter Northwoods    schedule 13.06.2018
comment
однократное использование PathSegment.close или даже без его использования не имело никакого значения. однако комментирование следующей строки сделало вывод немного близким к целевому. fig.add(new go.PathSegment(go.PathSegment.Move, rad + rad2, rad)); - person Abdullah; 20.06.2018
comment
Я обновил рассматриваемую функцию makeGeo, теперь вы можете увидеть обновленный результат. Я думаю, что сейчас очень близко, но понятия не имею, как исправить эти тонкие линии ... - person Abdullah; 20.06.2018