代码之家  ›  专栏  ›  技术社区  ›  hamdalf

剑道甜甜圈图表-具有多个标签的单个系列

  •  0
  • hamdalf  · 技术社区  · 7 年前

    我已经阅读telerik文档好几天了,现在我正式迷路了。使用ASP的UI是否可以实现这一点。NET MVC?

    basic mockup of desired result

    1 回复  |  直到 4 年前
        1
  •  0
  •   ezanker    7 年前

    据我所知,这是不支持开箱即用的。但是,您可以使用该系列 visual property 绘制顶部有文字的线段。

    求出起点和终点之间的夹角,以及内外部之间的半径。然后使用三角学从极坐标(角度和半径)到笛卡尔坐标(x和y)。您可以对此进行调整,以获得所需的文本位置。

    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