javascript - 将文字放入剑道甜甜圈图

我正在尝试创建一个半圆的甜甜圈图，以显示一些进度数据。我能够完成。此外，我需要将文本放置在甜甜圈图的内部/中心，这又一次我能够成功完成。现在，我有一个新的要求，我需要在图形的开始和结束位置显示一些文本（我需要在任一轴上显示0％和100％）。我毫不费力地尝试了几种方法。您能帮我解决一个问题吗？
请在这里找到我创建的dojo：

http://dojo.telerik.com/Exike

这大概是我希望最终结果看起来像的样子：



有什么建议吗？

提前致谢。

最佳答案

您可以在渲染函数中添加几个文本框，然后使用边界框将其放置：

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

关于javascript - 将文字放入剑道甜甜圈图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41116469/