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

Question

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

几天来我一直在阅读 telerik 文档，现在我正式迷路了。 UI 对于 ASP.NET MVC 这可能吗？

basic mockup of desired result

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

极坐标到笛卡尔坐标：

  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 圆环图 - 具有多个标签的单个系列

kendo donut chart - single series with multiple labels

kendo-ui

kendo-asp.net-mvc

DEMO