【问题标题】：kendo donut chart - single series with multiple labels剑道甜甜圈图 - 具有多个标签的单个系列
【发布时间】：2017-09-07 01:51:29
【问题描述】：

我正在尝试创建一个包含一个系列的圆环图，但该系列的每个项目都有两个值，一个是百分比值，另一个是美元值。我想放置 % 值“position:center”，然后让类别名称和美元值成为常规的“outsideEnd”定位标签。

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

basic mockup of desired result

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc

【解决方案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;
}

极坐标到笛卡尔坐标：

  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))
    };
  }

DEMO

【讨论】：