的 DEMO

Question

我正在尝试创建一个包含一个系列的圆环图，但是与该系列的每个项目关联的两个值，一个是％值，另一个是美元值。我想将％值设置为“position：center”，然后让类别名称和美元值成为常规的“outsideEnd”定位标签。

我已经读了几天的telerik文档，现在我正式迷失了。这对于ASP.NET MVC的UI是否可行？

Answer 1

据我所知，这不是开箱即用的。但是，您可以使用 visual property 系列来绘制带有文字的片段。

找到开始和结束之间的中间角度，找到内部和外部之间的半径。然后使用三角法从极坐标（角度和半径）到笛卡尔坐标（x和y）坐标。您可以调整它以获得所需的文本位置。

e.createVisual（）获取细分

visual: function (e) {
  var mid = e.startAngle + (e.endAngle - e.startAngle) / 2;
  var rad = e.innerRadius + (e.radius - e.innerRadius) / 2
  var p = polarToCartesian(e.center.x, e.center.y, rad, mid);

  var group = new kendo.drawing.Group();
  var text = new kendo.drawing.Text(e.value, [p.x , p.y], {
      fill: {color:  "#111",}
    });

  group.append(e.createVisual());
  group.append(text);
  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))
    };
  }

kendo圆环图 - 带有多个标签的单个系列

1 个答案:

的 DEMO