Question

我正在尝试创建一个半圆形圆环图以显示一些进度数据。这个我能够完成。此外，我需要将文本放在圆环图的内部/中心，这也是我能够成功完成的。现在我有一个新的要求，我需要在图形的开始和结束位置显示一些文本（我需要在任一轴上显示0％和100％）。我没有任何麻烦尝试了几种方法。能帮我解决一下可能的解决方案吗？请找到我在这里创建的道场：

http://dojo.telerik.com/Exike

这大致是我希望我的最终结果如下所示：

对此有何建议？

提前致谢。

Answer 1

您可以在渲染功能中添加几个文本框，然后使用边界框放置它们：

    render: function (e) {
            var draw = kendo.drawing;
            var geom = kendo.geometry;
            var chart = e.sender;

            // The center and radius are populated by now.
            // We can ask a circle geometry to calculate the bounding rectangle for us.                
            var circleGeometry = new geom.Circle(center, radius);
            var bbox = circleGeometry.bbox();

            // Render the text                
            var text = new draw.Text("33%", [0, 0], {
              font: "18px Verdana,Arial,sans-serif"
            });
            // Align the text in the bounding box                
            draw.align([text], bbox, "center");
            draw.vAlign([text], bbox, "center");

            var text0 = new draw.Text("0%", [bbox.origin.x, bbox.origin.y + bbox.size.height / 2 ], {
              font: "10px Verdana,Arial,sans-serif"
            });
            var text100 = new draw.Text("100%", [bbox.origin.x + bbox.size.width - 28, bbox.origin.y + bbox.size.height / 2 ], {
              font: "10px Verdana,Arial,sans-serif"
            });

             // Draw it on the Chart drawing surface
            e.sender.surface.draw(text);
            e.sender.surface.draw(text0);
            e.sender.surface.draw(text100);
        }

Answer 2

为此使用DonutCenterTemplate：

public class Cat {
    private String breed;
    private String color;

    public Cat(String breed, String color) {
        this.breed = breed;
        this.color = color;
    }

    public String getBreed() {
        return this.breed;
    }

    public String getColor() {
        return this.color;
    }
}

将文字放在剑道甜甜圈图表中

2 个答案: