请参考此示例:http://jsfiddle.net/mcLEb/
jQuery("#grid").kendoChart(
{
theme: jQuery(document).data("kendoSkin") || "default",
legend:
{
position: "bottom"
},
chartArea: {
height: 200
},
seriesDefaults:
{
labels:
{
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
},
series: [{
type: "pie",
data:[70,20,10]
}],
tooltip:
{
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#d2d2d2","#01619e"],
plotArea: { margin: { left: 50, right: 50 } },
});
更多澄清:现在,标签位于饼图之外,箭头指向其对应的饼图部分。我希望标签本身位于相应的饼图部分中。
我知道饼状部分可能会比里面的实际文本小,但我会处理的。
提前感谢!
使用下面的代码(将位置设置为"中心")
seriesDefaults:
{
labels:
{
position: "center",
visible: true,
format: "{0}%",
font: "12px Arial",
}
}
我发现的最好的方法是在标签上使用insideEnd位置。
seriesDefaults:
{
labels:
{
position: "insideEnd",
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}
另一种不太可靠的方法是在标签上使用负距离属性。
seriesDefaults:
{
labels:
{
distance: -10,
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}