如何使用angular2在kendo UI中围绕圆环图的边缘

Question

我想要圆形边缘的圆环图如图所示，需要帮助

Answer 1

不支持开箱即用。但是，您可以使用 visual property 系列为细分添加圆形结束。

的 DEMO

视觉功能为您提供线段的起始和终止角度以及内半径和外半径以及中心的坐标。鉴于这些，您可以使用三角法从极坐标（角度和半径）到笛卡尔坐标（x和y）坐标，以便在每个线段的开头绘制圆圈。对于最后一个片段，您还需要在第一个片段的颜色末尾绘制一个圆圈，使其看起来正确。

e.createVisual()获取原始细分。

 visual: function (e) {
    var seg = e.createVisual(); //get original segment geometry

    var circRad = (e.radius - e.innerRadius) /2; //end cap radius
    var dist = e.innerRadius + circRad; 
    var spoint = polarToCartesian(e.center.x, e.center.y, dist, e.startAngle);
    var epoint = polarToCartesian(e.center.x, e.center.y, dist, e.endAngle);

    //draw circle at start of segment
    var startArcGeometry = new kendo.geometry.Arc([spoint.x, spoint.y], {
      startAngle: 0,endAngle: 360,radiusX: circRad,radiusY: circRad         
    });                      
    var startArc = new kendo.drawing.Arc(startArcGeometry, {
      fill: {color: e.options.color},
      stroke: {color: "none"}
    });

    var group = new kendo.drawing.Group();
    group.append(seg, startArc);

    //for last item draw circle at end of segment in color of first item
    var lastItem = e.series.data[e.series.data.length - 1];
    if (lastItem.category == e.category){                        
      var firstItem = e.series.data[0];
      console.log(firstItem.color);

      var endArcGeometry = new kendo.geometry.Arc([epoint.x, epoint.y], {
        startAngle: 0,endAngle: 360,radiusX: circRad, radiusY: circRad  
      });

      var endArc = new kendo.drawing.Arc(endArcGeometry, {
        fill: {color: firstItem.color},
        stroke: {color: "none" }
      });

      group.append(endArc);
   }      
   return group;
 }

Polar to Cartesian转换：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees) * Math.PI / 180.0;

    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
}