在 kendo 圆环图中放置文本

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：

<ng-template kendoChartDonutCenterTemplate>
        <h3>99.5%</h3>
        Accepted
</ng-template>

在 kendo 圆环图中放置文本

Place text in kendo donut chart

javascript

css

jquery

kendo-ui

kendo-chart