我正在尝试创建一个半圆形圆环图来显示一些进度数据。这是我能够完成的。此外,我需要将文本放在圆环图的内部/中心,我再次能够成功完成。现在我有一个新要求,我需要在图表的开始和结束位置显示一些文本(我需要在任一轴上显示 0% 和 100%)。我毫不费力地尝试了几种方法。你能帮我一个可能的解决方案吗? 请在这里找到我创建的道场:
这大致是我希望我的最终结果看起来像这样:
有什么建议吗?
提前致谢。
最佳答案
您可以在渲染函数中添加几个文本框并使用边界框放置它们:
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/